/* css/admin-diagnostics.css */
.admin-diagnostic-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.admin-health-list {
    display: grid;
    gap: 10px;
}

.admin-health-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--preview-bg);
}

.admin-health-row strong {
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.admin-health-row p {
    margin: 4px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    word-break: break-word;
}

.admin-json-block {
    max-height: 360px;
    overflow: auto;
    padding: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}


/* css/main.css */
/* ===== Apple Design System ===== */
:root {
    /* Apple 配色方案 */
    --primary: #0071e3;           /* Apple Blue */
    --primary-dark: #0077ed;
    --primary-light: #2997ff;
    --secondary: #86868b;         /* Apple Gray */
    --success: #34c759;           /* Apple Green */
    --warning: #ff9f0a;           /* Apple Orange */
    --error: #ff3b30;             /* Apple Red */

    /* 背景 - 纯净简约 */
    --bg-gradient-start: #ffffff;
    --bg-gradient-end: #f5f5f7;

    /* 卡片和输入 */
    --card-bg: #ffffff;
    --input-bg: #f5f5f7;
    --preview-bg: #f5f5f7;

    /* 文本 - Apple 标准 */
    --text-primary: #1d1d1f;
    /* Darker than Apple's #86868b/#a1a1a6 so small text meets WCAG AA (4.5:1) on white. */
    --text-secondary: #6e6e73;
    --text-muted: #767679;

    /* 边框和阴影 - 极简柔和 */
    --border: rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 14px 44px rgba(0, 0, 0, 0.16);

    /* Surfaces and accents shared by light/dark themes */
    --surface-hover: rgba(0, 0, 0, 0.04);
    --primary-soft: rgba(0, 113, 227, 0.08);
    --primary-soft-strong: rgba(0, 113, 227, 0.14);
    --error-soft: rgba(255, 59, 48, 0.1);
    --warning-soft: rgba(255, 159, 10, 0.12);
    --success-soft: rgba(52, 199, 89, 0.12);
    --focus-ring: var(--primary);

    /* Aliases referenced by component CSS that were previously undefined */
    --bg-secondary: var(--input-bg);
    --bg-card: var(--card-bg);
    --bg-hover: var(--surface-hover);
    --text: var(--text-primary);
    --text-tertiary: var(--text-muted);

    /* Type scale */
    --fs-2xs: 0.75rem;     /* 12px */
    --fs-xs: 0.8125rem;    /* 13px */
    --fs-sm: 0.875rem;     /* 14px */
    --fs-md: 0.9375rem;    /* 15px */
    --fs-base: 1rem;       /* 16px */
    --fs-lg: 1.125rem;     /* 18px */
    --fs-xl: 1.25rem;      /* 20px */
    --fs-2xl: 1.5rem;      /* 24px */
    --fs-3xl: 2rem;        /* 32px */

    /* Radius scale */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Stacking order: toasts must stay above modals so errors raised inside a modal are visible. */
    --z-raised: 10;
    --z-dropdown: 100;
    --z-nav: 1000;
    --z-popover: 1100;
    --z-modal: 2000;
    --z-modal-stacked: 2100;
    --z-toast: 3000;
}

/* 深色模式 - Apple Dark */
[data-theme="dark"] {
    --primary: #2997ff;           /* Apple Blue Light */
    --primary-dark: #0071e3;
    --primary-light: #5ac8fa;
    --secondary: #98989d;
    --success: #30d158;
    --warning: #ffd60a;
    --error: #ff453a;

    --bg-gradient-start: #000000;
    --bg-gradient-end: #1c1c1e;

    --card-bg: #1c1c1e;
    --input-bg: #2c2c2e;
    --preview-bg: #2c2c2e;

    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-muted: #8e8e93;

    --surface-hover: rgba(255, 255, 255, 0.06);
    --primary-soft: rgba(41, 151, 255, 0.14);
    --primary-soft-strong: rgba(41, 151, 255, 0.22);
    --error-soft: rgba(255, 69, 58, 0.16);
    --warning-soft: rgba(255, 214, 10, 0.14);
    --success-soft: rgba(48, 209, 88, 0.16);

    --border: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* 深色模式简化背景 */
[data-theme="dark"] body::before {
    display: none;
}

[data-theme="dark"] .settings-field input,
[data-theme="dark"] .url-input {
    flex: 1;
    background: var(--input-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .settings-field input:focus {
    background: var(--input-bg);
}

[data-theme="dark"] .preview-markdown {
    background: var(--preview-bg);
}


[data-theme="dark"] .language-option {
    flex: 1;
    background: var(--input-bg);
}

[data-theme="dark"] .language-option.selected {
    background: rgba(41, 151, 255, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'PingFang SC', 'Helvetica Neue', 'Inter', sans-serif;
    background: var(--bg-gradient-end);
    min-height: 100vh;
    color: var(--text-primary);
    font-size: var(--fs-base);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Keyboard focus indicator. Several component rules set outline: none on :focus,
   so this needs !important to stay visible for keyboard users. */
:where(a, button, summary, [role="button"], [role="tab"], [role="radio"], [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"], select):focus-visible {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: 2px;
}

label:has(> input[type="radio"]:focus-visible),
label:has(> input[type="checkbox"]:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Dialog panels receive programmatic focus only as a fallback target */
[role="dialog"][tabindex="-1"]:focus {
    outline: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.container {
    max-width: 2400px;
    margin: 0 auto;
    padding: 20px 24px;
}

/* 中大屏幕 */
@media (min-width: 1400px) {
    .container {
        padding: 24px 32px;
    }
}

/* 大屏幕 */
@media (min-width: 1600px) {
    .container {
        padding: 24px 40px;
    }
}

/* 超大屏幕 */
@media (min-width: 1920px) {
    .container {
        padding: 28px 48px;
    }
}

/* 超宽屏幕 */
@media (min-width: 2560px) {
    .container {
        max-width: 2800px;
        padding: 32px 56px;
    }
}


/* css/navbar.css */
/* ===== 顶部导航栏 ===== */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: var(--z-nav);
}

[data-theme="dark"] .top-navbar {
    background: rgba(28, 28, 30, 0.72);
}

.top-navbar-content {
    max-width: 2200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
}

.navbar-logo .logo-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.navbar-logo .logo-icon svg {
    width: 40px;
    height: 40px;
}

.navbar-logo .logo-text {
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.top-navbar-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Navbar 按钮样式 */
.navbar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.navbar-btn:hover {
    background: var(--input-bg);
    color: var(--primary);
}

.navbar-btn svg {
    width: 18px;
    height: 18px;
}

.navbar-btn.user-btn.logged-in {
    background: rgba(0, 113, 227, 0.1);
    color: var(--primary);
}

/* 配额胶囊：套餐徽标 + 剩余比例环 + 剩余量，点击打开用户中心 */
.quota-display {
    --quota-color: var(--primary);
    --quota-track: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    background: var(--input-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] .quota-display {
    --quota-track: rgba(255, 255, 255, 0.16);
}

.quota-display[hidden] {
    display: none;
}

.quota-display:hover {
    border-color: var(--border);
    background: var(--surface-hover);
}

.quota-display:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.quota-plan {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--card-bg);
    color: var(--text-secondary);
    box-shadow: 0 0 0 1px var(--border);
}

.quota-plan.tier-pro { background: var(--primary-soft-strong); color: var(--primary); box-shadow: none; }
.quota-plan.tier-max { background: var(--warning-soft); color: #b45309; box-shadow: none; }
.quota-plan.tier-ultra { background: rgba(124, 58, 237, 0.14); color: #7c3aed; box-shadow: none; }
.quota-plan.tier-admin { background: var(--success-soft); color: #15803d; box-shadow: none; }
[data-theme="dark"] .quota-plan.tier-max { color: #fbbf24; }
[data-theme="dark"] .quota-plan.tier-ultra { color: #c4b5fd; }
[data-theme="dark"] .quota-plan.tier-admin { color: var(--success); }

.quota-ring {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: conic-gradient(var(--quota-color) calc(var(--quota-left, 100) * 1%), var(--quota-track) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}

.quota-display.is-unlimited .quota-ring {
    display: none;
}

.quota-display.is-low {
    --quota-color: var(--warning);
}

.quota-display.is-empty {
    --quota-color: var(--error);
    color: var(--error);
}

.quota-text {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 管理员：LLM 中转站余额胶囊 + 明细面板 */
.relay-wrap {
    position: relative;
}

.relay-chip {
    --relay-color: var(--success);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: var(--input-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.relay-chip[hidden] {
    display: none;
}

.relay-chip:hover,
.relay-chip[aria-expanded="true"] {
    border-color: var(--border);
    background: var(--surface-hover);
}

.relay-chip:focus-visible,
.relay-panel button:focus-visible,
.relay-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.relay-chip[data-level="warn"],
.relay-row[data-level="warn"] { --relay-color: var(--warning); }
.relay-chip[data-level="low"],
.relay-chip[data-level="empty"],
.relay-chip[data-level="error"],
.relay-row[data-level="low"],
.relay-row[data-level="empty"],
.relay-row[data-level="error"] { --relay-color: var(--error); }
.relay-chip[data-level="loading"] { --relay-color: var(--text-muted); }

.relay-dot,
.relay-row-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--relay-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--relay-color) 18%, transparent);
}

.relay-value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.relay-value[data-level="low"],
.relay-value[data-level="empty"],
.relay-value[data-level="error"] {
    color: var(--error);
}

.relay-panel {
    --relay-color: var(--success);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: var(--z-popover);
    width: 280px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.relay-panel[hidden] {
    display: none;
}

.relay-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.relay-refresh {
    padding: 2px 8px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: var(--fs-2xs);
    cursor: pointer;
}

.relay-refresh:hover {
    background: var(--primary-soft);
}

.relay-row {
    --relay-color: var(--success);
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.relay-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.relay-row-label {
    flex: 1;
    min-width: 0;
}

.relay-row-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.relay-row[data-level="low"] .relay-row-value,
.relay-row[data-level="empty"] .relay-row-value,
.relay-row[data-level="error"] .relay-row-value {
    color: var(--error);
}

.relay-wallet {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0 10px;
    border-top: 1px solid var(--border);
}

.relay-wallet-label {
    color: var(--text-secondary);
}

.relay-wallet-value {
    font-size: var(--fs-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.relay-wallet[data-level="low"] .relay-wallet-value,
.relay-wallet[data-level="empty"] .relay-wallet-value {
    color: var(--error);
}

.relay-section {
    padding: 8px 0 2px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-2xs);
}

.relay-section + .relay-row {
    border-top: none;
}

.relay-row-value.is-spend {
    font-weight: 500;
    color: var(--text-secondary);
}

.relay-bar {
    height: 4px;
    margin: 6px 0 0 16px;
    border-radius: var(--radius-pill);
    background: var(--input-bg);
    overflow: hidden;
}

.relay-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--relay-color);
}

.relay-row-sub,
.relay-note {
    margin: 4px 0 0 16px;
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    line-height: 1.5;
}

.relay-note {
    margin-left: 0;
}

.relay-link {
    display: block;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--primary);
    font-size: var(--fs-xs);
    text-decoration: none;
}

.relay-link::after {
    content: " ↗";
}

.relay-link:hover {
    text-decoration: underline;
}

/* 语言 / 主题：紧凑图标按钮，和账号类按钮用细竖线隔开 */
.navbar-divider {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: var(--border);
}

.navbar-btn.navbar-btn-compact {
    gap: 5px;
    padding: 8px 10px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.navbar-btn.navbar-icon-btn {
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text-secondary);
}

.navbar-btn.navbar-btn-compact:hover,
.navbar-btn.navbar-icon-btn:hover {
    color: var(--text-primary);
}
/* 页面内容需要留出导航栏空间 */
#workspacePage {
    padding-top: 64px;
}

@media (max-width: 768px) {
    .top-navbar-content {
        padding: 0 12px;
    }

    .top-navbar-buttons {
        gap: 4px;
        min-width: 0;
    }

    .navbar-btn {
        padding: 8px 10px;
        font-size: var(--fs-md);
        white-space: nowrap;
    }

    .quota-display {
        padding: 4px 10px 4px 4px;
        gap: 6px;
        min-width: 0;
    }

    .quota-text {
        display: none;
    }

    .relay-label,
    .navbar-divider {
        display: none;
    }

    .relay-chip {
        padding: 6px 10px;
    }

    .relay-panel {
        position: fixed;
        top: 60px;
        left: 12px;
        right: 12px;
        width: auto;
    }

    .navbar-btn.navbar-btn-compact {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .navbar-logo .logo-text {
        display: none;
    }

    .navbar-logo .logo-icon,
    .navbar-logo .logo-icon svg {
        width: 32px;
        height: 32px;
    }

    .navbar-btn {
        padding: 8px;
    }

    .navbar-btn.user-btn svg {
        display: none;
    }
}


/* css/modals.css */
/* 低额度提醒横幅 */
.low-quota-banner {
    display: none;
    position: fixed;
    top: 82px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--warning);
    color: white;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    z-index: var(--z-nav);
    font-size: var(--fs-md);
    font-weight: 500;
    align-items: center;
    gap: 12px;
    animation: slideDown 0.3s ease-out;
}

.low-quota-banner.show {
    display: flex;
}

.low-quota-banner.critical {
    background: var(--error);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.low-quota-banner svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.low-quota-banner .banner-text {
    flex: 1;
    height: 100%;
}

.low-quota-banner .recharge-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.low-quota-banner .recharge-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}

.low-quota-banner .close-banner {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.low-quota-banner .close-banner:hover {
    color: white;
}

.low-quota-banner .close-banner svg {
    width: 16px;
    height: 16px;
}

/* 加油包/充值弹窗样式 */
.recharge-modal .modal-content {
    max-width: 560px;
    overflow-y: auto;
}

.booster-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 64px 8px 24px;
}

.booster-header h2 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 2px 0 4px;
}

.booster-header p {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.booster-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--warning-soft);
    color: #d97706;
}

.recharge-option .amount small {
    margin-left: 3px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

.recharge-footnote {
    margin-top: 12px;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.recharge-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px 24px;
}

@media (max-width: 480px) {
    .recharge-options {
        grid-template-columns: 1fr;
    }
}

.recharge-option {
    position: relative;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recharge-option:hover {
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.recharge-option.selected {
    border-color: var(--primary);
    background: rgba(0, 113, 227, 0.1);
}

.recharge-option .popular-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.recharge-option .amount {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
    margin-top: 4px;
}

.recharge-option .bonus {
    font-size: var(--fs-2xs);
    color: var(--success);
    font-weight: 500;
}

.recharge-option .price {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin-top: 8px;
    font-weight: 600;
}

.recharge-summary {
    background: var(--input-bg);
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
}

.recharge-summary .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.recharge-summary .summary-row.total {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.recharge-btn-confirm {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.2s ease;
}

.recharge-btn-confirm:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.4);
}

.recharge-btn-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 法律页面模态框样式 */
.legal-modal .modal-content {
    max-width: 800px;
    max-height: 85vh;
}

.legal-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
}


.legal-modal-body {
    padding: 48px 40px 40px;
    overflow-y: auto;
    max-height: calc(85vh - 20px);
}

.legal-modal-body h1 {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: center;
}

.legal-modal-body .legal-subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 32px;
}

.legal-modal-body h2 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 32px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.legal-modal-body h3 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 20px;
    margin-bottom: 12px;
}

.legal-modal-body p {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.legal-modal-body ul, .legal-modal-body ol {
    padding-left: 20px;
    margin-bottom: 16px;
}

.legal-modal-body li {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.legal-modal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: var(--fs-xs);
}

.legal-modal-body table th,
.legal-modal-body table td {
    padding: 10px 12px;
    text-align: left;
    border: 1px solid var(--border);
}

.legal-modal-body table th {
    background: var(--input-bg);
    font-weight: 600;
    color: var(--text-primary);
}

.legal-modal-body table td {
    color: var(--text-secondary);
}

.legal-modal-body .legal-section {
    margin-bottom: 24px;
}

.legal-modal-body .legal-important {
    background: rgba(0, 113, 227, 0.08);
    border-left: 4px solid var(--primary);
    padding: 16px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 16px 0;
}

.legal-modal-body .legal-important p {
    margin-bottom: 0;
    color: var(--text-primary);
}

.legal-modal-body .contact-info {
    background: var(--input-bg);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 24px;
}

.legal-modal-body .contact-info h3 {
    margin-top: 0;
}

.legal-modal-body .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.legal-modal-body .contact-item:last-child {
    margin-bottom: 0;
}

.legal-modal-body .contact-label {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 80px;
}

.legal-modal-body .contact-value {
    color: var(--primary);
}

.legal-modal-body a {
    color: var(--primary);
    text-decoration: none;
}

.legal-modal-body a:hover {
    text-decoration: underline;
}

/* 会员定价页面样式 */
.pricing-modal .modal-content {
    max-width: 1100px;
    overflow-y: auto;
}

.pricing-note {
    padding: 0 24px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* 选择月付/年付的二级弹窗，叠在定价弹窗之上 */
.sub-select-modal {
    z-index: var(--z-modal-stacked);
}

.sub-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sub-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.sub-option:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.sub-option:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.sub-option.is-featured {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.sub-option-badge {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 600;
}

.sub-option-info,
.sub-option-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sub-option-info strong {
    font-size: var(--fs-md);
    font-weight: 600;
}

.sub-option-info small {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.sub-option-price {
    align-items: flex-end;
}

.sub-option-price strong {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--primary);
}

.sub-option-price s {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.sub-options-note {
    margin-top: 16px;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.pricing-header {
    text-align: center;
    padding: 32px 56px 24px;
    background: var(--input-bg);
    border-bottom: 1px solid var(--border);
}

.pricing-header h2 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.pricing-header p {
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 24px;
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    /* 手机上先看推荐档，免费档放最后 */
    .pricing-card.popular {
        order: -1;
    }

    #pricingFree {
        order: 1;
    }

    .pricing-header {
        padding: 24px 52px 18px;
    }

    .pricing-header h2 {
        font-size: var(--fs-xl);
    }
}

.pricing-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.pricing-card.popular {
    border-color: var(--primary);
    background: rgba(0, 113, 227, 0.05);
}

.pricing-card.popular::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

.pricing-card.current {
    border-color: var(--success);
    background: var(--success-soft);
}

.pricing-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}

.pricing-badge.popular {
    background: var(--primary);
    color: white;
}

.pricing-badge.current {
    background: var(--success);
    color: white;
}

.pricing-badge.premium {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.pricing-badge.placeholder {
    visibility: hidden;
}

.pricing-card.premium {
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.05) 100%);
}

.pricing-card.premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

/* Ultra 会员样式 */
.pricing-badge.ultra {
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    color: white;
}

.pricing-card.ultra {
    border-color: #7c3aed;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%);
}

.pricing-card.ultra::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
}

.pricing-btn.ultra {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
}

.pricing-btn.ultra:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
    transform: translateY(-1px);
}

.pricing-tier {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.pricing-price {
    margin-bottom: 20px;
}

.pricing-price .amount {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--primary);
}

.pricing-price .currency {
    font-size: var(--fs-base);
    color: var(--text-secondary);
}

.pricing-price .period {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.pricing-features {
    text-align: left;
    margin-bottom: 20px;
}

.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.pricing-feature:last-child {
    border-bottom: none;
}

.pricing-feature svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--success);
    margin-top: 2px;
}

.pricing-feature.highlight {
    color: var(--text-primary);
    font-weight: 500;
}

.pricing-btn {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pricing-btn.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.pricing-btn.primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.4);
}

.pricing-btn.secondary {
    background: var(--bg-gradient-start);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.pricing-btn.secondary:hover {
    background: var(--border);
}

.pricing-btn.current {
    background: var(--success-soft);
    color: #15803d;
    cursor: default;
}

[data-theme="dark"] .pricing-btn.current {
    color: var(--success);
}

.pricing-btn.is-lower {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border);
}

.pricing-btn:disabled {
    cursor: default;
}

.pricing-btn:disabled:not(.current):not(.is-lower) {
    opacity: 0.6;
}

.pricing-btn.premium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.pricing-btn.premium:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.membership-info-card {
    background: rgba(0, 113, 227, 0.06);
    border: none;
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.membership-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.membership-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
}

.membership-icon.free {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.membership-icon.pro {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.membership-icon.max {
    background: linear-gradient(135deg, var(--secondary) 0%, #db2777 100%);
}

.membership-details h4 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.membership-details span {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.membership-upgrade-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.membership-upgrade-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
}

/* 设置弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* 所有弹窗共用的外壳：标题栏 / 内容区 / 底栏三段式，内容区单独滚动 */
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: min(90vh, 900px);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.modal-overlay.show .modal-content {
    animation: modal-pop-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modal-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.modal-content.modal-sm { max-width: 440px; }
.modal-content.modal-md { max-width: 480px; }
.modal-content.modal-lg { max-width: 600px; }

.modal-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}

.modal-header h2 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-close:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-close:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* 没有标准标题栏的弹窗（定价、加油包、法律页）把关闭按钮浮在右上角 */
.modal-close.modal-close-floating {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: var(--z-raised);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.modal-close.modal-close-floating:hover {
    background: var(--input-bg);
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.settings-section {
    margin-bottom: 28px;
}

.settings-section:last-of-type {
    margin-bottom: 16px;
}

.settings-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.settings-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.settings-icon.summary-icon {
    background: var(--primary);
}

.settings-icon.transcribe-icon {
    background: var(--secondary);
}

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

.settings-field:last-child {
    margin-bottom: 0;
}

.settings-field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.settings-field input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    color: var(--text-primary);
    background: rgba(248, 250, 252, 0.8);
    transition: all 0.2s ease;
}

/* Flex 容器内的输入框 */
.email-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.email-input-row input {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.email-input-row .btn {
    width: auto !important;
    white-space: nowrap;
    padding: 8px 16px !important;
    flex-shrink: 0;
}

.settings-field input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

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

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 48px;
}

.toggle-password {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.toggle-password:hover {
    color: var(--primary);
    background: rgba(0, 113, 227, 0.1);
}

.settings-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 113, 227, 0.06);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.settings-hint svg {
    flex-shrink: 0;
    color: var(--primary);
    margin-top: 2px;
}

/* 翻译弹窗样式 */
.language-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.language-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--fs-sm);
    text-align: center;
}

.language-option:hover {
    border-color: var(--primary-light);
    background: rgba(0, 113, 227, 0.05);
}

.language-option input {
    display: none;
}

.language-option:has(input:checked) {
    border-color: var(--primary);
    background: rgba(0, 113, 227, 0.1);
    color: var(--primary);
    font-weight: 600;
}

/* 分享笔记 / 专有词汇弹窗 */
.modal-intro {
    margin: 0 0 16px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

.share-expiry {
    grid-template-columns: repeat(3, 1fr);
}

.share-status {
    margin: 16px 0 8px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.share-link-row {
    display: flex;
    gap: 8px;
}

.share-link-row[hidden] {
    display: none;
}

.share-link-row input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
}

.modal-footer .share-revoke {
    margin-right: auto;
    color: var(--error);
}

.modal-footer .share-revoke[hidden] {
    display: none;
}

.glossary-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 180px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.6;
}

.glossary-counter {
    margin: 6px 0 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: right;
}

.glossary-counter.over {
    color: var(--error);
}

/* 思维导图 */
.modal-content.modal-mindmap {
    max-width: min(1100px, 94vw);
    width: 94vw;
}

.mindmap-canvas {
    --mm-line: var(--border);
    overflow: auto;
    max-height: 68vh;
    padding: 8px 4px 16px;
}

.mindmap-empty {
    margin: 24px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.mm-branch {
    display: flex;
    align-items: center;
    position: relative;
}

.mm-node {
    flex: none;
    max-width: 260px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.mm-node.has-children {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.mm-node.has-children::after {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: currentColor;
    opacity: 0.6;
}

.mm-branch.collapsed > .mm-node.has-children::after {
    background: transparent;
}

.mm-branch.collapsed > .mm-children {
    display: none;
}

.mm-depth-0 > .mm-node {
    padding: 10px 16px;
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 600;
}

.mm-depth-1 > .mm-node {
    border-color: var(--primary-light);
    background: var(--primary-soft);
    font-weight: 600;
}

.mm-depth-3 > .mm-node {
    border-style: dashed;
    color: var(--text-secondary);
}

.mm-children {
    display: flex;
    flex-direction: column;
    margin-left: 32px;
    position: relative;
}

.mm-children::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    width: 32px;
    border-top: 1.5px solid var(--mm-line);
}

.mm-children > .mm-branch {
    padding: 4px 0 4px 16px;
}

.mm-children > .mm-branch::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    border-top: 1.5px solid var(--mm-line);
}

.mm-children > .mm-branch::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 1.5px solid var(--mm-line);
}

.mm-children > .mm-branch:first-child::after {
    top: 50%;
}

.mm-children > .mm-branch:last-child::after {
    bottom: 50%;
}

.mm-children > .mm-branch:only-child::after {
    display: none;
}

/* 修改讲话人 */
.speaker-rename-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.speaker-rename-row label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.speaker-rename-count {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-muted);
}

.speaker-rename-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
}

.speaker-rename-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}
/* 重新整理弹窗 */
.regenerate-styles {
    grid-template-columns: repeat(3, 1fr);
}

.regenerate-select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
}

.regenerate-cost {
    margin: 4px 0 8px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.regenerate-warning {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--warning, #b45309);
}.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: var(--fs-md);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.field-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 6px 0 0 30px;
}

.translate-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    color: var(--text-secondary);
}

.progress-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
}

.modal-footer .btn {
    width: auto;
    min-width: 88px;
    margin: 0;
    padding: 10px 20px;
}

.modal-footer .uc-btn {
    min-width: 88px;
    padding: 10px 18px;
}

.modal-btn {
    width: auto;
    padding: 12px 24px;
}

@media (max-width: 600px) {
    .modal-overlay {
        padding: 12px;
    }

    .modal-content {
        max-height: calc(100dvh - 24px);
    }

    .modal-header {
        padding: 14px 14px 14px 18px;
    }

    .modal-body {
        padding: 18px;
    }

    .modal-footer {
        padding: 12px 18px;
    }

    .modal-footer .btn,
    .modal-footer .uc-btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay.show .modal-content {
        animation: none;
    }
}

/* ==================== 用户中心弹窗 ==================== */
.user-modal-content {
    max-width: 420px;
    display: flex;
    flex-direction: column;
}

#userModal.is-profile .user-modal-content {
    max-width: 460px;
}

#userModal .modal-body {
    flex: 1;
    min-height: 0;
    max-height: none;
}

#userModal.is-profile .modal-body {
    padding: 20px 24px 24px !important;
}

.uc-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.uc-avatar {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
}

.uc-avatar:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.uc-avatar-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #0071e3 0%, #7c3aed 100%);
    transition: filter 0.2s ease;
}

.uc-avatar-img svg {
    width: 52%;
    height: 52%;
}

.uc-avatar-img img {
    height: 100%;
}

.uc-avatar:hover .uc-avatar-img {
    filter: brightness(0.92);
}

.uc-profile-text {
    flex: 1;
    min-width: 0;
}

.uc-name {
    margin: 0 0 6px;
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uc-plan-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.uc-plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--input-bg);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
}

.uc-plan-badge.tier-pro {
    background: var(--primary-soft-strong);
    color: var(--primary);
}

.uc-plan-badge.tier-max {
    background: rgba(124, 58, 237, 0.14);
    color: #7c3aed;
}

.uc-plan-badge.tier-ultra {
    background: linear-gradient(90deg, #7c3aed, #db2777);
    color: #fff;
}

.uc-plan-badge.tier-admin {
    background: rgba(15, 23, 42, 0.86);
    color: #fff;
}

[data-theme="dark"] .uc-plan-badge.tier-max {
    color: #a78bfa;
}

[data-theme="dark"] .uc-plan-badge.tier-admin {
    background: rgba(255, 255, 255, 0.16);
}

.uc-plan-expires {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.uc-plan-expires.is-expired {
    color: var(--error);
    font-weight: 600;
}

.uc-ghost-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.uc-ghost-btn:hover {
    background: var(--input-bg);
    color: var(--text-primary);
}

.uc-card {
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

.uc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.uc-card-title {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: 600;
}

.uc-card-head .uc-card-title {
    margin: 0;
}

.uc-card-hint {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.uc-card-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* 用量 */
.uc-usage {
    background: linear-gradient(180deg, var(--primary-soft), transparent 70%), var(--card-bg);
}

.uc-meter + .uc-meter {
    margin-top: 14px;
}

.uc-meter-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    font-size: var(--fs-sm);
}

.uc-meter-label {
    color: var(--text-secondary);
}

.uc-meter-value {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.uc-meter-bar {
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--input-bg);
}

.uc-meter-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0071e3, #7c3aed);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.uc-meter.is-warn .uc-meter-bar span {
    background: var(--warning);
}

.uc-meter.is-full .uc-meter-bar span {
    background: var(--error);
}

.uc-meter.is-full .uc-meter-value {
    color: var(--error);
}

.uc-meter.is-unlimited .uc-meter-bar {
    display: none;
}

.uc-usage-note {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.uc-usage-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.uc-usage-foot:not(:has(.uc-card-hint:not(:empty))):not(:has(.uc-upgrade-btn:not([hidden]))) {
    display: none;
}

.uc-upgrade-btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: 7px 16px;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #0071e3, #7c3aed);
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.28);
    color: #fff;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.uc-upgrade-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.36);
}

.uc-upgrade-btn[hidden] {
    display: none;
}

/* 通知开关 */
.uc-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    cursor: pointer;
}

.uc-switch-row + .uc-switch-row {
    border-top: 1px solid var(--border);
}

.uc-card-title + .uc-switch-row {
    padding-top: 0;
}

.uc-switch-row:last-child {
    padding-bottom: 0;
}

.uc-switch-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--fs-sm);
}

.uc-switch-text small {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.uc-switch {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 24px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--border-strong, rgba(120, 120, 128, 0.32));
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.uc-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.uc-switch:checked {
    background: var(--success);
}

.uc-switch:checked::before {
    transform: translateX(16px);
}

.uc-switch:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 兑换码 / 邀请 */
.uc-inline-form {
    display: flex;
    gap: 8px;
}

.uc-inline-form input {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.uc-inline-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft-strong);
}

.uc-inline-form input::placeholder {
    color: var(--text-muted);
}

.uc-code-input {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.uc-code-input::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

.uc-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.uc-btn:hover {
    background: var(--input-bg);
}

.uc-btn.primary {
    border-color: transparent;
    background: var(--primary);
    color: #fff;
}

.uc-btn.primary:hover {
    background: var(--primary-dark);
}

.uc-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.uc-block-btn {
    width: 100%;
    margin-top: 14px;
}

.uc-invite {
    border-color: rgba(124, 58, 237, 0.2);
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.06), rgba(124, 58, 237, 0.08)), var(--card-bg);
}

.uc-invite-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.uc-invite-head .uc-card-title {
    margin-bottom: 4px;
}

.uc-invite-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0071e3, #7c3aed);
    color: #fff;
}

#inviteCodeSection {
    margin-top: 14px;
}

.uc-invite-code {
    background: var(--card-bg) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-align: center;
}

.uc-invite-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.uc-invite-stats strong {
    color: var(--text-primary);
}

.uc-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.uc-logout:hover {
    background: var(--error-soft);
    color: var(--error);
}

@media (max-width: 480px) {
    #userModal.is-profile .modal-body {
        padding: 16px !important;
    }

    .uc-ghost-btn span {
        display: none;
    }

    .uc-ghost-btn {
        padding: 8px;
    }
}

/* ==================== 编辑资料弹窗 ==================== */
.pe-avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.pe-avatar {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
}

.pe-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pe-avatar-side {
    min-width: 0;
}

.pe-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pe-upload {
    cursor: pointer;
}

.pe-hint {
    margin-top: 8px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.pe-presets {
    margin: -6px 0 20px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--input-bg);
}

.pe-preset-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pe-preset {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pe-preset:hover,
.pe-preset:focus-visible {
    border-color: var(--primary);
    transform: scale(1.05);
    outline: none;
}

.pe-preset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pe-presets-empty {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.pe-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pe-count {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.pe-textarea {
    display: block;
    width: 100%;
    resize: vertical;
    min-height: 84px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pe-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

@media (max-width: 420px) {
    .pe-avatar-row {
        flex-direction: column;
        text-align: center;
    }

    .pe-avatar-actions {
        justify-content: center;
    }
}

/* ==================== 登录 / 注册 / 找回密码 ==================== */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 22px;
    border-radius: var(--radius-md);
    background: var(--input-bg);
}

.auth-tabs[hidden] {
    display: none;
}

.auth-tab {
    padding: 9px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.auth-tab:hover {
    color: var(--text-primary);
}

.auth-tab.active {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.auth-tab:focus-visible,
.auth-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

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

.auth-intro {
    margin-bottom: 18px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.auth-label-row label {
    margin-bottom: 8px;
}

.auth-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-link.muted {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.auth-link.muted:hover {
    color: var(--primary);
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-code-input {
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
}

.auth-code-input::placeholder,
.auth-invite-input::placeholder {
    letter-spacing: normal;
    text-transform: none;
}

.auth-error {
    display: none;
    margin: -4px 0 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--error-soft);
    color: var(--error);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.auth-submit {
    margin-top: 4px;
    padding: 12px 20px;
    font-weight: 600;
}

.auth-switch {
    margin-top: 16px;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.auth-invite {
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
}

.auth-invite summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    list-style: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
}

.auth-invite summary::-webkit-details-marker {
    display: none;
}

.auth-invite summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.auth-invite[open] summary::before {
    content: '−';
}

.auth-invite .settings-field {
    margin: 0;
    padding: 0 14px 14px;
}

.invite-code-input-wrapper {
    position: relative;
}

.auth-invite-input {
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.auth-invite .settings-field input {
    background: var(--card-bg);
}

.invite-code-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-muted);
}

.invite-code-status.is-ok,
.invite-code-hint.is-ok {
    color: var(--success);
}

.invite-code-status.is-error,
.invite-code-hint.is-error {
    color: var(--error);
}

.invite-code-hint {
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.email-input-row .uc-btn {
    min-width: 96px;
}

@media (max-width: 400px) {
    .auth-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* 数据与账号 */
.uc-data .uc-card-desc {
    margin-bottom: 12px;
}

.uc-data-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.uc-danger-link {
    display: inline-block;
    margin-top: 14px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--fs-xs);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.uc-danger-link:hover {
    color: var(--error);
}

.uc-danger-link[hidden] {
    display: none;
}

.uc-delete-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-sm);
    background: var(--error-soft);
}

.uc-delete-form[hidden] {
    display: none;
}

.uc-delete-warning {
    margin: 0;
    color: var(--error);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.uc-delete-input {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
}

.uc-delete-input:focus {
    outline: none;
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.uc-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.uc-btn.danger {
    border-color: transparent;
    background: var(--error);
    color: #fff;
}

.uc-btn.danger:hover {
    background: #b91c1c;
}

/* 播客订阅 */
.podcast-subs {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.podcast-subs[hidden] {
    display: none;
}

.podcast-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
}

.podcast-cover {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--input-bg);
}

.podcast-cover[hidden] {
    display: none;
}

.podcast-sub-text,
.podcast-preview-text {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.podcast-sub-text strong,
.podcast-preview-text strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podcast-sub-meta,
.podcast-preview-text span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podcast-sub-meta.is-error {
    color: var(--error);
}

.podcast-sub-btn {
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
}

.podcast-sub-btn:hover {
    background: var(--input-bg);
    color: var(--text-primary);
}

.podcast-sub-btn.is-danger:hover {
    border-color: var(--error);
    background: var(--error-soft);
    color: var(--error);
}

.podcast-sub-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.podcast-add {
    display: flex;
    gap: 8px;
}

.podcast-url-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
}

.podcast-url-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft-strong);
}

.podcast-add .btn {
    flex-shrink: 0;
    width: auto;
    padding: 10px 16px;
}

.podcast-preview {
    margin-top: 14px;
}

.podcast-preview[hidden] {
    display: none;
}

.podcast-preview-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.podcast-preview-head .podcast-cover {
    width: 52px;
    height: 52px;
}

.podcast-pick-hint {
    margin: 12px 0 8px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.podcast-episodes {
    max-height: 300px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    list-style: none;
}

.podcast-episodes li + li {
    border-top: 1px solid var(--border);
}

.podcast-episode {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
}

.podcast-episode:hover {
    background: var(--input-bg);
}

.podcast-episode input {
    flex-shrink: 0;
    margin-top: 3px;
}

.podcast-episode:has(input:disabled) {
    cursor: default;
}

.podcast-episode-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.podcast-episode-title {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.podcast-episode-text small {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}


/* css/workspace.css */
/* 头部 - Apple 风格 */
header {
    text-align: center;
    padding: 40px 20px 36px;
    max-width: 1100px;
    margin: 0 auto;
}

.header-intro {
    max-width: 800px;
    margin: 16px auto 0;
    text-align: center;
}

.header-intro p {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.6;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.header-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 16px;
}

.header-features span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: 500;
    padding: 8px 16px;
    background: var(--card-bg);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.header-features span:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.header-features span::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    flex-shrink: 0;
}

.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--primary);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 113, 227, 0.25);
}

.logo svg {
    width: 36px;
    height: 36px;
    color: white;
}

header h1 {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin-bottom: 0;
    line-height: 1.1;
}

.header-tagline {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary) 0%, #5ac8fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
    margin: 0 0 16px 0;
    line-height: 1.1;
}

header p:not(.header-tagline) {
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* 主网格 - 使用 flex 布局，左侧可拖拽调整宽度 */
.main-grid {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.main-grid .left-column {
    width: var(--left-column-width, 400px);
    min-width: 320px;
    max-width: 50%;
    flex-shrink: 0;
}

.main-grid .preview-area {
    flex: 1;
    min-width: 400px;
}

/* 大屏幕 (≥1600px) */
@media (min-width: 1600px) {
    .main-grid .left-column {
        width: var(--left-column-width, 450px);
    }
}

/* 中等屏幕 (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .main-grid .left-column {
        width: var(--left-column-width, 400px);
    }
}

/* 小屏幕桌面 (1025px - 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
    .main-grid .left-column {
        width: var(--left-column-width, 360px);
        min-width: 300px;
    }
    .main-grid .preview-area {
        min-width: 350px;
    }
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.left-column .card:first-child {
    flex: 0 0 auto;
}

.left-column .card:last-child {
    padding-bottom: 0;
    flex: 1 1 auto;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

/* 列宽拖拽调整 - 位于两列间隔中间 */
.column-resizer {
    width: 16px;
    margin: 0 -8px;
    background: transparent;
    cursor: col-resize;
    position: relative;
    z-index: var(--z-raised);
    flex-shrink: 0;
}

.column-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 48px;
    background: var(--border);
    border-radius: var(--radius-xs);
    opacity: 0;
    transition: all 0.2s ease;
}

.column-resizer:hover::after {
    opacity: 1;
    height: 80px;
    background: var(--primary-light);
}

.column-resizer.dragging::after {
    opacity: 1;
    height: 100%;
    background: var(--primary);
}

/* 禁止拖拽时选中文字 */
body.resizing {
    user-select: none;
    cursor: col-resize;
}

body.resizing * {
    cursor: col-resize !important;
}

/* 历史记录侧边栏（大屏幕显示） */
.history-sidebar {
    display: none;
    flex-direction: column;
}

.history-sidebar .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 平板及以下 (≤1024px) - 单栏布局 */
@media (max-width: 1024px) {
    .main-grid {
        flex-direction: column;
        gap: 20px;
    }

    .main-grid .left-column {
        width: 100% !important;
        max-width: 100%;
        min-width: auto;
    }

    .main-grid .preview-area {
        min-width: auto;
        width: 100%;
    }

    .column-resizer {
        display: none;
    }
}

/* 卡片 */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: none;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 中大屏幕卡片优化 */
@media (min-width: 1400px) {
    .card {
        padding: 24px;
    }
}

/* 大屏幕卡片优化 */
@media (min-width: 1600px) {
    .card {
        padding: 26px;
    }
}

/* 超大屏幕卡片优化 */
@media (min-width: 1920px) {
    .card {
        padding: 28px;
    }
}

.card:hover {
    transform: scale(1.005);
    box-shadow: var(--shadow-lg);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.card-title .icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.card-title .icon svg {
    width: 18px;
    height: 18px;
}

.card-title .icon--history {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.card-title .icon--preview {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

/* 工作台面板：内容面板不做悬停缩放，避免长文阅读时抖动 */
.ws-panel:hover {
    transform: none;
}

/* 桌面端：预览区固定在视口内，高度由 CSS 决定，不再依赖左侧列 */
@media (min-width: 1025px) {
    .main-grid {
        align-items: flex-start;
    }

    .main-grid .preview-area {
        position: sticky;
        top: 80px;
        height: calc(100vh - 96px);
        height: calc(100dvh - 96px);
        min-height: 480px;
    }

    .main-grid .left-column .card:last-child {
        max-height: calc(100vh - 96px);
        max-height: calc(100dvh - 96px);
    }
}

/* 手机端底部切换栏 */
.mobile-tabbar {
    display: none;
}

@media (max-width: 768px) {
    #workspaceContent {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    #workspaceContent:not([data-mobile-tab="new"]) .ws-panel[data-panel="new"],
    #workspaceContent:not([data-mobile-tab="notes"]) .ws-panel[data-panel="notes"],
    #workspaceContent:not([data-mobile-tab="history"]) .ws-panel[data-panel="history"] {
        display: none !important;
    }

    #workspaceContent[data-mobile-tab="notes"] .left-column {
        display: none;
    }

    #workspaceContent .preview-area.card {
        overflow: visible;
        min-height: calc(100vh - 64px - 104px);
        min-height: calc(100dvh - 64px - 104px);
    }

    #workspaceContent .preview-area .preview-content {
        overflow: visible;
    }

    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-nav);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid var(--border);
    }

    [data-theme="dark"] .mobile-tabbar {
        background: rgba(28, 28, 30, 0.86);
    }

    .mobile-tab {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 4px;
        border: none;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--text-muted);
        font-size: var(--fs-2xs);
        font-weight: 500;
        cursor: pointer;
    }

    .mobile-tab svg {
        width: 22px;
        height: 22px;
    }

    .mobile-tab[aria-pressed="true"] {
        color: var(--primary);
    }
}


/* css/upload.css */
/* 上传区域 - Apple 风格 */
.upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card-bg);
    margin-bottom: 20px;
}

.upload-area:hover, .upload-area.dragover {
    border-color: var(--primary);
    background: rgba(0, 113, 227, 0.04);
}

.upload-icon {
    width: 72px;
    height: 72px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.upload-icon svg {
    width: 32px;
    height: 32px;
    color: white;
}

.upload-area h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.upload-area p {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    margin-bottom: 12px;
}

.upload-formats {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.format-tag {
    background: rgba(0, 113, 227, 0.1);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.file-input {
    display: none;
}

/* 已选文件 */
.file-selected {
    background: var(--input-bg);
    border: none;
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.file-selected .file-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.file-selected .file-icon svg {
    width: 24px;
    height: 24px;
}

.file-selected .file-info {
    flex: 1;
    height: 100%;
    min-width: 0;
}

.file-selected .file-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-selected .file-size {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.file-selected .remove-btn {
    width: 36px;
    height: 36px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: var(--radius-md);
    color: var(--error);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.file-selected .remove-btn:hover {
    background: var(--error);
    color: white;
}

/* 批量文件队列 */
.batch-file-list {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.batch-file-list .batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.batch-file-list .batch-header h4 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-file-list .batch-header .file-count {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: var(--fs-2xs);
    font-weight: 600;
}

.batch-file-list .batch-header .clear-all-btn {
    background: transparent;
    border: 1px solid var(--error);
    color: var(--error);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: all 0.2s;
}

.batch-file-list .batch-header .clear-all-btn:hover {
    background: var(--error);
    color: white;
}

.batch-file-list .file-queue {
    max-height: 200px;
    overflow-y: auto;
}

.batch-file-list .queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--input-bg);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.batch-file-list .queue-item:last-child {
    margin-bottom: 0;
}

.batch-file-list .queue-item .queue-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.batch-file-list .queue-item .queue-icon svg {
    width: 16px;
    height: 16px;
    color: white;
}

.batch-file-list .queue-item .queue-info {
    flex: 1;
    height: 100%;
    min-width: 0;
}

.batch-file-list .queue-item .queue-name {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.batch-file-list .queue-item .queue-size {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.batch-file-list .queue-item .queue-status {
    font-size: var(--fs-2xs);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.batch-file-list .queue-item .queue-status.pending {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted);
}

.batch-file-list .queue-item .queue-status.processing {
    background: rgba(0, 113, 227, 0.2);
    color: var(--primary);
}

.batch-file-list .queue-item .queue-status.completed {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.batch-file-list .queue-item .queue-status.failed {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.batch-file-list .queue-item .remove-queue-item {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    flex-shrink: 0;
}

.batch-file-list .queue-item .remove-queue-item:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

/* 选项组 */
.option-group {
    margin-bottom: 20px;
}

/* 处理选项：左侧说明，右侧开关（与用户中心的开关一致） */
.option-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.option-card + .option-card {
    margin-top: 8px;
}

.option-card:hover {
    background: var(--surface-hover);
}

.option-card.selected {
    background: var(--primary-soft);
    border-color: var(--primary-soft-strong);
}

.option-card:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.option-card label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.option-card input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    order: 2;
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 24px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: rgba(120, 120, 128, 0.32);
    cursor: pointer;
    transition: background 0.2s ease;
}

.option-card input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.option-card input[type="checkbox"]:checked {
    background: var(--success);
}

.option-card input[type="checkbox"]:checked::after {
    transform: translateX(16px);
}

.option-card input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.option-card input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

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

.option-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.option-desc {
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--text-secondary);
}

/* AI 模型：点开后在卡片内展开列表，不用浮层，避免被上传面板裁切 */
.option-card.model-option {
    padding: 0;
    cursor: default;
}

.option-card.model-option:hover {
    background: var(--card-bg);
}

.option-card.model-option.open {
    border-color: var(--primary-soft-strong);
}

.model-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: 0;
    border-radius: inherit;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.model-trigger:hover {
    background: var(--surface-hover);
}

.model-option.open .model-trigger {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.model-trigger .option-title,
.model-trigger .option-desc {
    display: block;
}

.model-current {
    flex-shrink: 0;
    max-width: 48%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary);
}

.model-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.model-option.open .model-chevron {
    transform: rotate(180deg);
}

.model-panel {
    padding: 6px;
    border-top: 1px solid var(--border);
}

.model-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    outline: none;
    transition: background 0.15s ease;
}

.model-item:hover,
.model-item:focus-visible {
    background: var(--surface-hover);
}

.model-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.model-item.selected {
    background: var(--primary-soft);
}

.model-item-text {
    flex: 1;
    min-width: 0;
}

.model-item-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.model-item-desc {
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-secondary);
}

.model-mult {
    margin-left: 4px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--input-bg);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    vertical-align: 1px;
}

.model-item.locked .model-item-text {
    opacity: 0.5;
}

.model-tier {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.model-tier svg {
    width: 11px;
    height: 11px;
}

.model-tier.tier-free {
    background: var(--input-bg);
    color: var(--text-secondary);
}

.model-tier.tier-pro {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
}

.model-tier.tier-max {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.model-tier.tier-ultra {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
}

[data-theme="dark"] .model-tier.tier-pro { color: #64b5ff; }
[data-theme="dark"] .model-tier.tier-max { color: #fbbf24; }
[data-theme="dark"] .model-tier.tier-ultra { color: #c4a5ff; }

.model-check {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--primary);
    visibility: hidden;
}

.model-item.selected .model-check {
    visibility: visible;
}

.model-panel-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    padding: 8px 10px 4px;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.model-upgrade {
    padding: 0;
    background: none;
    border: 0;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.model-upgrade:hover {
    text-decoration: underline;
}/* 语言选择 */
.language-selector {
    background: rgba(0, 113, 227, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.language-selector .option-title {
    margin-bottom: 12px;
}

.language-options {
    display: flex;
    gap: 12px;
}

.language-option {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.language-option:hover {
    border-color: var(--primary-light);
}

.language-option.selected {
    border-color: var(--primary);
    background: rgba(0, 113, 227, 0.08);
}

.language-option input {
    display: none;
}

.language-option .lang-icon {
    font-size: var(--fs-lg);
}

.language-option .lang-name {
    font-weight: 500;
    color: var(--text-primary);
}

/* 音频语言：分段按钮（不用国旗表情，Windows 会把国旗显示成字母） */
#audioLanguageGroup .language-options {
    gap: 2px;
    padding: 3px;
    background: var(--input-bg);
    border-radius: var(--radius-pill);
}

#audioLanguageGroup .language-option {
    height: auto;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
}

#audioLanguageGroup .language-option:hover {
    color: var(--text-primary);
}

#audioLanguageGroup .language-option .lang-name {
    font-size: var(--fs-sm);
    color: inherit;
}

#audioLanguageGroup .language-option.selected {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] #audioLanguageGroup .language-option {
    background: transparent;
}

[data-theme="dark"] #audioLanguageGroup .language-option.selected {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* 输入模式切换 */
.input-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.mode-tab {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 113, 227, 0.04);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-tab:hover {
    background: rgba(0, 113, 227, 0.08);
    border-color: var(--primary-light);
}

.mode-tab.active {
    background: rgba(0, 113, 227, 0.12);
    border-color: var(--primary);
    color: var(--primary);
}

.mode-tab svg {
    flex-shrink: 0;
}

/* URL输入区域 */
.url-input-area {
    margin-bottom: 24px;
}

.url-input-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: var(--input-bg);
    border: none;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.url-input-container:focus-within {
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.url-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.url-input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    font-size: var(--fs-md);
    color: var(--text-primary);
    outline: none;
}

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

.url-clear-btn {
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.url-clear-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

.url-hint {
    margin-top: 8px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: center;
}

textarea.url-input {
    display: block;
    resize: none;
    padding: 0;
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.5;
    min-height: 1.5em;
    max-height: 160px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.link-batch {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

.link-batch[hidden],
.link-batch-clear[hidden] {
    display: none;
}

.link-batch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.link-batch-clear {
    border: none;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
}

.link-batch-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.link-batch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
}

.link-batch-item:first-child {
    border-top: none;
}

.link-batch-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--text-secondary);
}

button.link-batch-name {
    color: var(--primary);
    cursor: pointer;
}

button.link-batch-name:hover {
    text-decoration: underline;
}

.link-batch-status {
    flex-shrink: 0;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.link-batch-item.is-processing .link-batch-status {
    color: var(--primary);
}

.link-batch-item.is-completed .link-batch-status {
    color: var(--success, #16a34a);
}

.link-batch-item.is-failed .link-batch-status {
    color: var(--error);
}
/* 上传区收起：有笔记的用户在桌面端默认只留一行“新建笔记”，让历史记录出现在第一屏 */
.upload-collapsed-label,
.upload-collapse-btn {
    display: none;
}

@media (min-width: 769px) {
    .upload-collapse-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        margin-left: auto;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .upload-collapse-btn:hover {
        background: var(--input-bg);
        color: var(--text-primary);
    }

    .upload-collapse-btn:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    .upload-collapse-btn svg {
        width: 18px;
        height: 18px;
        transition: transform 0.2s ease;
    }

    /* 排队或处理中时进度显示在上传区里，不允许收起 */
    #uploadCard:has(#progressContainer.show, #queueStatus.show) .upload-collapse-btn {
        display: none;
    }

    #uploadCard.is-collapsed:not(:has(#progressContainer.show, #queueStatus.show)) > :not(.card-title) {
        display: none !important;
    }

    #uploadCard.is-collapsed:not(:has(#progressContainer.show, #queueStatus.show)) .card-title {
        margin-bottom: 0;
        cursor: pointer;
    }

    #uploadCard.is-collapsed:not(:has(#progressContainer.show, #queueStatus.show)) #uploadCardTitleText {
        display: none;
    }

    #uploadCard.is-collapsed:not(:has(#progressContainer.show, #queueStatus.show)) .upload-collapsed-label {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    #uploadCard.is-collapsed .upload-collapse-btn svg {
        transform: rotate(180deg);
    }

    .upload-collapsed-hint {
        font-size: var(--fs-sm);
        font-weight: 400;
        color: var(--text-secondary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .upload-collapse-btn svg {
        transition: none;
    }
}

.podcast-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px auto 0;
    padding: 6px 12px;
    border: 1px dashed var(--border-strong, var(--border));
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
}

.podcast-entry:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.podcast-entry[hidden] {
    display: none;
}


/* css/progress.css */
/* 排队状态：与处理进度使用同一套视觉语言 */
.queue-status {
    display: none;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--input-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.queue-status.show {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px;
    animation: fadeIn 0.3s ease;
}

.queue-status .queue-cancel-btn {
    grid-column: 2;
    justify-self: start;
}

.queue-icon {
    flex: 0 0 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--warning-soft);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: queuePulse 2s infinite;
}

@keyframes queuePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

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

.queue-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.queue-detail {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 2px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.queue-count {
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.queue-level {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.queue-sep {
    margin: 0 6px;
    color: var(--text-muted);
}

.queue-stages {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
}

.queue-stages li {
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--border);
}

.queue-stages li.current {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: transparent;
}
.queue-level-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #f59e0b;
    color: white;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--fs-2xs);
}

.queue-level-badge.admin { background: #dc2626; }
.queue-level-badge.ultra { background: #7c3aed; }
.queue-level-badge.max { background: #2563eb; }
.queue-level-badge.pro { background: #059669; }
.queue-level-badge.free { background: #6b7280; }
.queue-level-badge.guest { background: #9ca3af; }

.queue-cancel-btn {
    padding: 8px 16px;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid #dc2626;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-xs);
    transition: all 0.2s;
}

.queue-cancel-btn:hover {
    background: #dc2626;
    color: white;
}

.progress-actions {
    display: none;
    justify-content: center;
    margin-top: 16px;
}

.progress-actions.show {
    display: flex;
}

.progress-cancel-btn {
    padding: 8px 16px;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid #dc2626;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-xs);
    transition: all 0.2s;
}

.progress-cancel-btn:hover:not(:disabled) {
    background: #dc2626;
    color: white;
}

.progress-cancel-btn:disabled,
.queue-cancel-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 进度区域 */
.progress-container {
    display: none;
    margin-bottom: 24px;
    padding: 24px;
    background: var(--input-bg);
    border-radius: var(--radius-lg);
    text-align: left;
}

.progress-container.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.progress-ring-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0;
    flex: 0 0 100px;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: rgba(0, 113, 227, 0.15);
    stroke-width: 8;
}

.progress-ring-fill {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-2xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.progress-text {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: var(--fs-base);
}

.progress-step {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.5;
}

.progress-hero {
    display: flex;
    align-items: center;
    gap: 20px;
}

.progress-copy {
    min-width: 0;
    flex: 1;
}

.progress-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.progress-track-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    font-weight: 500;
}

.progress-track-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: var(--border);
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    flex: 0 0 18px;
}

.progress-track-item.complete {
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

.progress-track-item.complete .progress-track-dot {
    background: #10b981;
    color: white;
}

.progress-track-item.current {
    color: var(--primary);
    background: rgba(0, 113, 227, 0.1);
}

.progress-track-item.current .progress-track-dot {
    background: var(--primary);
    color: white;
}

.progress-track-item.failed {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.progress-track-item.failed .progress-track-dot {
    background: #dc2626;
    color: white;
}

.progress-insight {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(0, 113, 227, 0.07);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.progress-checklist {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.progress-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.progress-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    margin-top: 1px;
    font-size: var(--fs-2xs);
    flex: 0 0 18px;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.progress-check-item.complete .progress-check-icon {
    background: #10b981;
    color: white;
}

.progress-check-item.current .progress-check-icon {
    background: var(--primary);
    color: white;
}

.progress-check-item.failed .progress-check-icon {
    background: #dc2626;
    color: white;
}

@media (max-width: 640px) {
    .progress-hero {
        align-items: flex-start;
        gap: 14px;
    }

    .progress-ring-container {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .progress-ring {
        width: 76px;
        height: 76px;
    }

    .progress-ring-bg,
    .progress-ring-fill {
        stroke-width: 7;
    }

    .progress-percent {
        font-size: var(--fs-lg);
    }

    .progress-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.progress-meta {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.progress-stage {
    padding: 2px 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--fs-2xs);
}

.progress-time {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* 处理日志面板 */
.progress-log {
    display: none;
    margin-top: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 100%;
    text-align: left;
}

.progress-log.admin-diagnostics-visible {
    display: block;
}

.progress-log-header {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--input-bg);
    user-select: none;
}

.progress-log-header:hover {
    background: var(--bg-secondary);
}

#progressLogToggle {
    font-size: var(--fs-2xs);
    transition: transform 0.2s ease;
}

.progress-log-content {
    max-height: 180px;
    overflow-y: auto;
    padding: 8px 14px 12px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: var(--fs-2xs);
    line-height: 1.8;
}

.progress-log-content.collapsed {
    display: none;
}

.log-entry {
    display: flex;
    gap: 8px;
    color: var(--text-secondary);
    padding: 2px 0;
}

.log-entry .log-icon {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.log-entry.completed .log-icon { color: #22c55e; }
.log-entry.in-progress .log-icon { color: var(--primary); }
.log-entry.error .log-icon { color: #ef4444; }

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

.log-entry.in-progress .log-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* 按钮 - Apple 胶囊风格 */
.btn {
    width: 100%;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    font-weight: 400;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: scale(1.02);
}

.btn-primary:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-primary:disabled {
    background: var(--input-bg);
    color: var(--text-muted);
    box-shadow: inset 0 0 0 1px var(--border);
    cursor: not-allowed;
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: none;
}

.btn-secondary:hover {
    text-decoration: underline;
}

.btn svg {
    width: 20px;
    height: 20px;
}

/* 紧凑按钮：用于结果操作栏等行内按钮组 */
.btn.btn-compact {
    width: auto;
    padding: 8px 16px;
    font-size: var(--fs-md);
    gap: 6px;
}

.btn.btn-compact svg {
    width: 16px;
    height: 16px;
}

.btn-outline {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-outline:hover:not(:disabled),
.btn-outline[aria-expanded="true"] {
    background: var(--surface-hover);
    border-color: var(--primary-light);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
}

.btn-ghost:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.btn.is-copied {
    background: var(--success);
}

/* 任务排队或处理中时隐藏"开始处理"按钮，避免重复提交 */
#uploadCard:has(#progressContainer.show) #processBtn,
#uploadCard:has(#queueStatus.show) #processBtn {
    display: none;
}


/* css/history.css */
/* 历史文件 */
.history-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.history-list::-webkit-scrollbar {
    width: 6px;
}

.history-list::-webkit-scrollbar-track {
    background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-xs);
}

.history-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    position: relative;
}

.history-item:hover {
    background: var(--input-bg);
}

.history-delete-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--error);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.history-item:hover .history-delete-btn {
    display: flex;
}

.history-delete-btn:hover {
    background: var(--error);
    color: white;
}

.history-item .file-icon {
    width: 34px;
    height: 34px;
    background: rgba(0, 113, 227, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-right: 12px;
    flex-shrink: 0;
}

.history-item .file-info {
    flex: 1;
    height: 100%;
    min-width: 0;
}

.history-item .file-name {
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.history-item .file-meta {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* 收藏/删除按钮浮在标题上方；给按钮铺上与行背景一致的底色，避免和文字叠在一起 */
.history-star-btn.starred {
    background: var(--card-bg);
    box-shadow: -6px 0 8px var(--card-bg);
}

.history-more-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.history-item:hover .history-more-btn,
.history-item:focus-within .history-more-btn,
.history-item:focus-within .history-star-btn,
.history-more-btn[aria-expanded="true"] {
    display: flex;
}

.history-item:hover .history-star-btn,
.history-item:hover .history-more-btn,
.history-item:hover .history-delete-btn {
    background: var(--input-bg);
}

.history-item .history-more-btn:hover,
.history-more-btn[aria-expanded="true"] {
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* 当前打开的笔记 */
.history-item.active {
    background: rgba(0, 113, 227, 0.08);
    box-shadow: inset 3px 0 0 var(--primary);
}

.history-item.active:hover {
    background: rgba(0, 113, 227, 0.12);
}

.history-item.active .file-name {
    color: var(--primary);
}

[data-theme="dark"] .history-item.active {
    background: rgba(41, 151, 255, 0.16);
}

/* 触屏没有悬停：操作按钮常驻并参与排版，不再浮在标题上（窄屏也按触屏处理，部分手机浏览器不报告 hover: none） */
@media (hover: none), (max-width: 768px) {
    .history-item .history-star-btn,
    .history-item .history-more-btn {
        position: static;
        transform: none;
        flex-shrink: 0;
        margin-left: 4px;
    }

    .history-item .history-more-btn {
        display: flex;
    }

    .history-item .history-star-btn.starred,
    .history-item:hover .history-star-btn,
    .history-item:hover .history-more-btn {
        background: transparent;
        box-shadow: none;
    }
}

.history-item:hover .history-star-btn {
    box-shadow: -6px 0 8px var(--input-bg);
}

.history-item:hover .history-star-btn:hover {
    background: rgba(255, 159, 10, 0.15);
}

.history-item:hover .history-delete-btn:hover {
    background: var(--error);
    color: white;
}

/* ===== 文件夹：横向标签栏（位于列表上方，不再占用列表宽度） ===== */

/* 卡片在桌面端只有 max-height，百分比高度无法解析；用 flex 把高度一路传到列表，让列表在卡片内滚动 */
.history-with-folders {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.folder-sidebar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;
    padding: 0 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* 横向布局下没有折叠需求；旧版本存下的折叠状态也不应把文件夹藏起来 */
.folder-header-left,
.folder-toggle-btn {
    display: none;
}

.folder-header {
    order: 2;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.folder-more-btn {
    border-style: solid;
}

.folder-more-btn[hidden] {
    display: none;
}

.folder-add-btn {
    width: 28px;
    height: 28px;
    border: 1px dashed var(--border);
    background: transparent;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.folder-add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.folder-list {
    order: 1;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.folder-list::-webkit-scrollbar {
    display: none;
}

.folder-list.has-overflow {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.folder-list.has-overflow.at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.folder-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--input-bg);
    cursor: pointer;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.folder-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.folder-item.active {
    background: var(--primary);
    color: #fff;
}

/* 自定义文件夹用一个彩色圆点代替 emoji；"全部 / 未分类"不需要图标 */
.folder-item-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    font-size: 0;
    flex-shrink: 0;
}

.folder-item[data-folder-id=""] .folder-item-icon,
.folder-item[data-folder-id="root"] .folder-item-icon {
    display: none;
}

.folder-item.active .folder-item-icon {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.folder-item-name {
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-item-count {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.folder-item.active .folder-item-count {
    color: rgba(255, 255, 255, 0.85);
}

.history-list-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* 文件夹右键菜单 */
.folder-context-menu {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 4px;
    z-index: var(--z-popover);
    min-width: 120px;
}

.folder-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.folder-context-menu-item:hover {
    background: var(--bg-hover);
}

.folder-context-menu-item.danger {
    color: #ef4444;
}

.folder-context-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* 按钮触发的操作菜单（复用右键菜单外观） */
.action-menu {
    min-width: 180px;
    max-width: min(280px, calc(100vw - 16px));
    max-height: min(360px, calc(100vh - 16px));
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
}

.action-menu .folder-context-menu-item {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
}

.action-menu .folder-context-menu-item:hover,
.action-menu .folder-context-menu-item:focus-visible {
    background: var(--bg-hover);
    outline: none;
}

.action-menu .folder-context-menu-item.danger:hover,
.action-menu .folder-context-menu-item.danger:focus-visible {
    background: rgba(239, 68, 68, 0.1);
}

.action-menu-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-menu-check {
    color: var(--primary);
    font-weight: 600;
}

.action-menu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.action-menu-label {
    padding: 6px 12px 2px;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.action-menu-divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}

/* 站内确认/输入对话框 */
.app-dialog {
    width: min(360px, calc(100vw - 32px));
}

.app-dialog h3 {
    line-height: 1.4;
    word-break: break-word;
}

.app-dialog-message {
    margin: -6px 0 20px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
    word-break: break-word;
}

/* 对话框里的两个按钮等宽等高，取消用浅底色，避免一个像按钮一个像链接 */
.app-dialog .folder-dialog-buttons .btn {
    width: auto;
    min-width: 88px;
    padding: 9px 18px;
    font-size: var(--fs-sm);
    font-weight: 500;
}

.app-dialog .folder-dialog-buttons .btn-secondary {
    background: var(--input-bg);
    color: var(--text-primary);
}

.app-dialog .folder-dialog-buttons .btn-secondary:hover {
    text-decoration: none;
    background: var(--bg-hover);
}

.app-dialog .btn-danger {
    background: var(--error);
    color: #fff;
    border: none;
}

.app-dialog .btn-danger:hover {
    filter: brightness(0.95);
}

/* 创建文件夹对话框 */
.folder-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: calc(var(--z-modal) + 1);
    width: 320px;
}

.folder-dialog h3 {
    margin: 0 0 16px 0;
    font-size: var(--fs-lg);
}

.folder-dialog input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: var(--fs-md);
    margin-bottom: 16px;
}

.folder-dialog input:focus {
    outline: none;
    border-color: var(--primary);
}

.folder-dialog-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.folder-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--z-modal);
}

/* ===== 科技风历史记录样式 ===== */

/* 搜索框 - Apple 风格 */
.tech-search-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--input-bg);
    border: none;
    border-radius: var(--radius-md);
    position: relative;
    transition: all 0.2s ease;
}

.tech-search-wrapper::before {
    display: none;
}

.tech-search-wrapper:focus-within::before {
    display: none;
}

.tech-search-wrapper:focus-within {
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.tech-search-icon {
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.tech-search-wrapper:focus-within .tech-search-icon {
    color: var(--primary);
}

.tech-search-input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--text-primary);
    outline: none;
}

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

.tech-clear-btn {
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-clear-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

.tech-search-glow {
    display: none;
}

.tech-search-wrapper:focus-within .tech-search-glow {
    display: none;
}

/* 搜索高亮样式 */
.search-highlight {
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%);
    color: var(--text-primary);
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    font-weight: 500;
}

/* 搜索匹配片段 */
.match-snippet {
    font-size: var(--fs-2xs);
    color: var(--text-tertiary);
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 通知设置样式 */
.notification-setting {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.notification-setting:last-child {
    margin-bottom: 0;
}

.notification-setting label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.notification-setting input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* 历史记录收藏按钮 - Apple 风格 */
.history-star-btn {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.history-item:hover .history-star-btn {
    display: flex;
}

.history-star-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--warning);
}

.history-star-btn.starred {
    display: flex;
    color: var(--warning);
}

.history-star-btn.starred:hover {
    background: rgba(255, 159, 10, 0.1);
}

/* 历史记录标签 - Apple 风格 */
.history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.history-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--fs-2xs);
    font-weight: 500;
    background: rgba(0, 113, 227, 0.1);
    color: var(--primary);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-tag::before {
    display: none;
}

.history-tag:hover {
    background: rgba(0, 113, 227, 0.15);
}

.history-tag:hover::before {
    display: none;
}

.history-tag .tag-remove {
    display: none;
    width: 12px;
    height: 12px;
    margin-left: 2px;
    opacity: 0.7;
}

.history-tag:hover .tag-remove {
    display: block;
}

/* 历史记录筛选工具栏 - Apple 风格 */
.history-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border: none;
}

.history-toolbar::before {
    display: none;
}

.history-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--fs-sm);
    font-weight: 400;
    background: var(--input-bg);
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-filter-btn::after {
    display: none;
}

.history-filter-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

.history-filter-btn:hover::after {
    display: none;
}

.history-filter-btn.active {
    background: var(--primary);
    color: white;
}

.history-filter-btn svg {
    width: 14px;
    height: 14px;
}

.history-sort-select {
    padding: 8px 16px;
    font-size: var(--fs-sm);
    font-weight: 400;
    background: var(--input-bg);
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2386868b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.history-sort-select:hover, .history-sort-select:focus {
    background: rgba(0, 0, 0, 0.08);
}

/* 标签输入框 - Apple 风格 */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: var(--input-bg);
    border: none;
    border-radius: var(--radius-md);
    min-height: 36px;
    align-items: center;
    transition: all 0.2s ease;
}

.tag-input-container:focus-within {
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.tag-input-container .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.tag-input-container .tag-chip .remove-chip {
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.tag-input-container .tag-chip .remove-chip:hover {
    opacity: 1;
}

.tag-input-container input {
    height: 100%;
    min-width: 80px;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

/* 拖拽排序样式 - Apple 风格 */
.history-item.dragging {
    opacity: 0.6;
    background: var(--input-bg);
    box-shadow: var(--shadow-md);
}

.history-item.drag-over {
    border-top: 2px solid var(--primary);
}

.history-item .drag-handle {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: rgba(0, 113, 227, 0.5);
    cursor: grab;
    opacity: 0;
    transition: all 0.3s ease;
}

.history-item:hover .drag-handle {
    opacity: 1;
}

.history-item .drag-handle:hover {
    color: var(--primary);
    filter: drop-shadow(0 0 4px rgba(0, 113, 227, 0.5));
}

.history-item.dragging .drag-handle {
    cursor: grabbing;
}

/* 标签管理弹窗 - 全息界面 */
.tag-manager-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 280px;
    background: var(--card-bg);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 16px;
    z-index: var(--z-popover);
    animation: popupSlideIn 0.2s ease;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tag-manager-popup::before {
    display: none;
}

.tag-manager-popup h4 {
    margin: 0 0 12px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.tag-suggestion {
    padding: 6px 12px;
    font-size: var(--fs-2xs);
    font-weight: 500;
    background: rgba(0, 113, 227, 0.1);
    color: var(--primary);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-suggestion:hover {
    background: rgba(0, 113, 227, 0.15);
}

/* 历史项目样式 - Apple 风格 */
.history-item {
    position: relative;
    transition: background 0.2s ease;
}

.history-item::before {
    display: none;
}

.history-item:hover::before {
    display: none;
}

.history-item:hover {
    background: var(--input-bg);
}

.history-item .file-icon {
    background: rgba(0, 113, 227, 0.1);
    border: none;
}

.history-item:hover .file-icon {
    background: rgba(0, 113, 227, 0.15);
}

.history-item::after {
    display: none;
}

.history-item:hover::after {
    display: none;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}


/* css/editor.css */
/* 预览区域：桌面端固定在视口内（sticky），内容区内部滚动 */
.preview-area.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.preview-area .preview-placeholder,
.preview-area .preview-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.preview-area .preview-content {
    overflow-y: auto;
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-align: center;
    padding: 32px 24px;
    overflow-y: auto;
}

.preview-placeholder .placeholder-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-soft);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.preview-placeholder svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

.preview-placeholder h3 {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.preview-placeholder p {
    font-size: var(--fs-md);
    margin-bottom: 16px;
}

.placeholder-steps {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
    max-width: 360px;
    width: 100%;
}

.placeholder-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.5;
}

.placeholder-steps .step-num {
    flex: 0 0 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 打开笔记时的加载状态：顶部细进度条，旧内容变淡；加载失败时旧内容仍在 */
.preview-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, transparent, var(--primary), transparent) no-repeat;
    background-size: 40% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.preview-area.is-loading::after {
    opacity: 1;
    animation: previewLoadingBar 1.1s ease-in-out infinite;
}

@keyframes previewLoadingBar {
    from { background-position: -70% 0; }
    to { background-position: 170% 0; }
}

.preview-area.is-loading .preview-content,
.preview-area.is-loading .preview-placeholder {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* 桌面端预览区是 sticky（已是定位元素）；窄屏需要显式定位，进度条才能贴在卡片顶部 */
@media (max-width: 1024px) {
    .preview-area {
        position: relative;
    }
}

/* 桌面端左侧已有完整历史列表，"最近的笔记"只在手机端（历史在另一个标签页）显示 */
@media (min-width: 769px) {
    .recent-notes {
        display: none !important;
    }
}
.recent-notes {
    margin-top: 28px;
    width: 100%;
    max-width: 360px;
    text-align: left;
}

.recent-notes-title {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.recent-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.recent-note {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--fs-md);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.recent-note:hover {
    background: var(--surface-hover);
    border-color: var(--primary-light);
}

.recent-note-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-note-meta {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.preview-content {
    display: none;
    flex-direction: column;
    height: 100%;
}

.preview-content.show {
    display: flex;
    animation: fadeIn 0.4s ease;
}

/* 结果头部：上排为元信息与标签，下排为操作栏 */
.preview-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.preview-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.preview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
}

.preview-stats .stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
}

.preview-stats .stat-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.preview-stats .stat-value {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.preview-stats .stat--minor {
    display: none;
}

@media (min-width: 1400px) {
    .preview-stats .stat--minor {
        display: flex;
    }
}

.preview-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.preview-tags-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.preview-tags-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.preview-tags-empty {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.preview-tags-list .history-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tag-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.tag-remove-btn:hover {
    opacity: 1;
    background: var(--surface-hover);
}

.tag-remove-btn svg {
    width: 12px;
    height: 12px;
}

.add-tag-btn {
    padding: 4px 10px;
    font-size: var(--fs-xs);
    background: var(--primary-soft);
    border: 1px dashed var(--primary);
    border-radius: var(--radius-md);
    color: var(--primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.add-tag-btn:hover {
    background: var(--primary-soft-strong);
}

.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.preview-toolbar .btn-edit {
    margin-left: auto;
}

.export-menu {
    position: relative;
    display: inline-flex;
}

.export-menu .chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

.export-menu .btn[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.export-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    padding: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

.export-dropdown[hidden] {
    display: none;
}

.export-option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--fs-md);
    text-align: left;
    cursor: pointer;
}

.export-option:hover,
.export-option:focus-visible {
    background: var(--primary-soft);
}

.export-option-ext {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* 笔记目录 */
.export-option[hidden] {
    display: none;
}

.more-tools-dropdown {
    min-width: 160px;
}
.preview-toolbar .outline-menu[hidden] {
    display: none;
}

.outline-dropdown {
    width: max-content;
    min-width: 220px;
    max-width: min(360px, 80vw);
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.outline-option {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outline-option.outline-level-1 {
    font-weight: 600;
}

.outline-option.outline-level-2 {
    padding-left: 24px;
    color: var(--text-secondary, var(--text-primary));
}

.preview-toolbar .saved-trans-btn {
    padding: 8px 14px;
    font-size: var(--fs-md);
    gap: 6px;
}

/* 编辑工具栏中的高亮色块 */
.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-xs);
}

.swatch--yellow { background: #fef08a; }
.swatch--green { background: #bbf7d0; }
.swatch--blue { background: #bfdbfe; }
.swatch--pink { background: #fbcfe8; }
/* 已保存翻译指示器 */
.saved-translations-indicator {
    position: relative;
    display: inline-block;
}

.saved-trans-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    font-weight: 400;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease;
}

.saved-trans-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.saved-trans-btn svg {
    width: 20px;
    height: 20px;
}

.saved-trans-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.saved-trans-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.saved-trans-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text);
    transition: background 0.15s ease;
}

.saved-trans-item:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.saved-trans-item:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.saved-trans-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* Markdown 预览：正文随面板变宽，只在超宽屏上限制行长 */
.preview-markdown {
    --md-measure: 1100px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: var(--radius-md);
    padding: 20px max(32px, calc((100% - var(--md-measure)) / 2));
    height: 100%;
    min-height: 400px;
    overflow-y: auto;
    font-size: var(--fs-lg);
    line-height: 1.8;
    overflow-wrap: break-word;
}

@media (min-width: 1200px) {
    .preview-markdown {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

@media (min-width: 1600px) {
    .preview-markdown {
        --md-measure: 1200px;
        padding-top: 36px;
        padding-bottom: 36px;
        font-size: var(--fs-xl);
    }
}

.preview-markdown::-webkit-scrollbar {
    width: 8px;
}

.preview-markdown::-webkit-scrollbar-track {
    background: transparent;
}

.preview-markdown::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-xs);
}

.preview-markdown > :first-child,
.preview-markdown .translation-content > :first-child {
    margin-top: 0;
}

.preview-markdown h1,
.preview-markdown h2,
.preview-markdown h3,
.preview-markdown h4,
.preview-markdown h5,
.preview-markdown h6 {
    color: var(--text-primary);
    line-height: 1.4;
    scroll-margin-top: 12px;
}

/* 笔记标题：全文唯一的大标题 */
.preview-markdown h1 {
    font-size: 1.55em;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary);
}

/* "内容总结""原文记录"等大分区：用色条区分，不和标题抢层级 */
.preview-markdown h1:not(:first-child) {
    font-size: 1.2em;
    margin: 40px 0 18px;
    padding: 10px 14px;
    border-bottom: none;
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--primary-soft);
}

.preview-markdown hr:has(+ h1) {
    display: none;
}

.preview-markdown h2 {
    font-size: 1.25em;
    font-weight: 650;
    margin: 32px 0 12px;
    color: var(--primary);
}

.preview-markdown h3 {
    font-size: 1.1em;
    font-weight: 650;
    margin: 24px 0 10px;
}

.preview-markdown h4,
.preview-markdown h5,
.preview-markdown h6 {
    font-size: 1em;
    font-weight: 650;
    margin: 18px 0 8px;
}

.preview-markdown p {
    margin: 0 0 0.85em;
    color: var(--text-primary);
}

.preview-markdown strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* 单独一行的斜体（如"以上总结由 AI 生成"）作为说明文字 */
.preview-markdown p > em:only-child {
    font-size: 0.9em;
    color: var(--text-muted);
}

/* 处理过程中的提示（某段整理失败、总结不完整等） */
.preview-markdown p.md-notice {
    padding: 10px 14px;
    border-left: 4px solid var(--warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--warning-soft);
    font-size: 0.92em;
}

.preview-markdown p.md-notice > em {
    font-size: inherit;
    font-style: normal;
    color: var(--text-primary);
}

/* 时间标记：总结里的可点击跳到原文；原文段落开头的只做标注 */
.preview-markdown .ts-link {
    display: inline-block;
    margin: 0 2px;
    padding: 0 6px;
    border-radius: var(--radius-xs);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
    vertical-align: 0.08em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.preview-markdown .ts-link:hover,
.preview-markdown .ts-link:focus-visible {
    background: var(--primary);
    color: #fff;
    outline: none;
}

.preview-markdown .ts-link.ts-anchor,
.preview-markdown .ts-link.ts-static {
    background: transparent;
    color: var(--text-muted);
    padding: 0 4px 0 0;
    margin-left: 0;
    cursor: default;
}

.preview-markdown .ts-link.ts-anchor:hover,
.preview-markdown .ts-link.ts-static:hover {
    background: transparent;
    color: var(--text-muted);
}

.preview-markdown .ts-flash {
    animation: ts-flash 2.6s ease;
    border-radius: var(--radius-xs);
}

@keyframes ts-flash {
    0%, 35% { background: var(--warning-soft); box-shadow: 0 0 0 6px var(--warning-soft); }
    100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

/* 笔记音频回放 */
.note-player {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-bottom: 12px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.note-player[hidden] {
    display: none;
}

.note-player-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.note-player-play,
.note-player-skip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.note-player-play {
    width: 38px;
    height: 38px;
    background: var(--primary);
    color: #fff;
}

.note-player-play:hover {
    filter: brightness(1.08);
}

.note-player-play:active,
.note-player-skip:active {
    transform: scale(0.94);
}

.note-player-skip {
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--text-secondary);
}

.note-player-skip:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.note-player-play:focus-visible,
.note-player-skip:focus-visible,
.note-player-rate:focus-visible,
.note-player-wave:focus-visible,
.note-player-marker:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.note-player-play svg {
    width: 18px;
    height: 18px;
}

.note-player-skip svg {
    width: 22px;
    height: 22px;
}

.note-player .icon-pause,
.note-player.is-playing .icon-play {
    display: none;
}

.note-player.is-playing .icon-pause {
    display: block;
}

/* 缓冲时播放键外圈转动 */
.note-player.is-buffering .note-player-play::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid transparent;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: note-player-spin 0.8s linear infinite;
}

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

.note-player-wave {
    --wave-played: var(--primary);
    --wave-rest: rgba(118, 118, 121, 0.3);
    position: relative;
    flex: 1;
    min-width: 0;
    height: 44px;
    cursor: pointer;
    border-radius: var(--radius-xs);
}

[data-theme="dark"] .note-player-wave {
    --wave-rest: rgba(142, 142, 147, 0.38);
}

.note-player-wave canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.note-player-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 要点标记：顶部小圆点 + 细竖线，命中区比可见部分宽 */
.note-player-marker {
    position: absolute;
    top: -4px;
    bottom: 0;
    width: 12px;
    padding: 0;
    border: none;
    background: transparent;
    transform: translateX(-50%);
    cursor: pointer;
    pointer-events: auto;
}

.note-player-marker::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 2px;
    left: 50%;
    width: 1px;
    background: var(--warning);
    opacity: 0.45;
    transform: translateX(-50%);
}

.note-player-marker::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--card-bg);
    border-radius: 50%;
    background: var(--warning);
    transform: translateX(-50%);
    transition: transform 0.12s ease;
}

.note-player-marker:hover::after,
.note-player-marker:focus-visible::after {
    transform: translateX(-50%) scale(1.35);
}

.note-player-marker:hover::before {
    opacity: 0.9;
}

.note-player-hover {
    position: absolute;
    bottom: calc(100% + 8px);
    z-index: 1;
    max-width: min(320px, 90%);
    overflow: hidden;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    background: var(--text-primary);
    color: var(--card-bg);
    font-size: 12px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.note-player-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    line-height: 1.3;
}

.note-player-time {
    color: var(--text-secondary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.note-player-expiry {
    color: var(--warning);
    font-size: 11px;
    white-space: nowrap;
}

.note-player-expiry[hidden] {
    display: none;
}

.note-player-rate {
    flex-shrink: 0;
    min-width: 46px;
    padding: 4px 10px;
    border: none;
    border-radius: 999px;
    background: var(--input-bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.note-player-rate:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.note-player-rate.is-changed {
    background: var(--primary-soft);
    color: var(--primary);
}

.note-player-status {
    display: none;
    flex: 1;
    padding: 8px 6px;
    color: var(--text-secondary);
    font-size: 13px;
}

.note-player.is-pending .note-player-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-player.is-pending .note-player-status::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: note-player-spin 0.8s linear infinite;
}

.note-player.is-pending .note-player-controls,
.note-player.is-pending .note-player-wave,
.note-player.is-pending .note-player-meta,
.note-player.is-pending .note-player-rate {
    display: none;
}

.preview-markdown .ts-link.ts-anchor.ts-seekable {
    color: var(--primary);
    cursor: pointer;
}

.preview-markdown .ts-link.ts-anchor.ts-seekable:hover,
.preview-markdown .ts-link.ts-anchor.ts-seekable:focus-visible {
    background: var(--primary-soft);
    color: var(--primary);
    outline: none;
}

.preview-markdown .ts-playing {
    border-radius: var(--radius-xs);
    background: var(--primary-soft);
    box-shadow: 0 0 0 6px var(--primary-soft);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 768px) {
    .note-player {
        top: 72px;
        gap: 8px;
        padding: 4px 8px 4px 4px;
    }

    .note-player-skip {
        width: 28px;
        height: 28px;
    }

    .note-player-skip svg {
        width: 20px;
        height: 20px;
    }

    .note-player-time {
        font-size: 12px;
    }

    .note-player-rate {
        min-width: 40px;
        padding: 4px 6px;
        font-size: 12px;
    }
}

/* 窄屏：控制键一行，波形单独占满第二行，方便手指点选 */
@media (max-width: 480px) {
    .note-player {
        flex-wrap: wrap;
        row-gap: 2px;
        padding-bottom: 6px;
    }

    .note-player-meta {
        margin-left: auto;
    }

    .note-player-wave {
        order: 3;
        flex-basis: 100%;
        height: 34px;
        margin: 0 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .note-player.is-buffering .note-player-play::after,
    .note-player.is-pending .note-player-status::before {
        animation-duration: 2.4s;
    }
}.preview-markdown .fact-flag {
    display: inline-block;
    margin: 0 1px;
    padding: 0 5px;
    border-radius: var(--radius-xs);
    background: var(--warning-soft);
    color: var(--text-primary);
    font-size: 0.78em;
    line-height: 1.6;
    white-space: nowrap;
    cursor: help;
}

.preview-markdown a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.preview-markdown del {
    color: var(--text-muted);
}

.preview-markdown code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86em;
    padding: 0.1em 0.4em;
    border-radius: var(--radius-xs);
    background: rgba(15, 23, 42, 0.06);
}

.preview-markdown pre {
    margin: 0 0 1em;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.05);
    overflow-x: auto;
    line-height: 1.6;
}

.preview-markdown pre code {
    padding: 0;
    background: none;
    font-size: 0.86em;
}

[data-theme="dark"] .preview-markdown code,
[data-theme="dark"] .preview-markdown pre {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .preview-markdown pre code {
    background: none;
}

.preview-markdown ul,
.preview-markdown ol {
    margin: 0 0 0.85em;
    padding-left: 1.5em;
}

.preview-markdown li ul,
.preview-markdown li ol {
    margin: 4px 0 0;
}

.preview-markdown ul ul {
    list-style-type: circle;
}

.preview-markdown li {
    margin-bottom: 4px;
    color: var(--text-primary);
}

.preview-markdown li::marker {
    color: var(--primary);
}

.preview-markdown hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 28px 0;
}

.preview-markdown blockquote {
    background: rgba(0, 113, 227, 0.05);
    border-left: 4px solid var(--primary);
    padding: 14px 18px;
    margin: 0 0 1em;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.preview-markdown blockquote p,
.preview-markdown .speaker-content p {
    margin: 0 0 0.6em;
}

.preview-markdown blockquote > :last-child,
.preview-markdown .speaker-content > :last-child {
    margin-bottom: 0;
}

/* 讲话人样式 - 不同讲话人使用不同颜色 */
.preview-markdown .speaker-block {
    margin: 0 0 14px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    position: relative;
}

.preview-markdown .speaker-block.speaker-1 {
    background: rgba(0, 113, 227, 0.06);
    border-left: 4px solid var(--primary);
}

.preview-markdown .speaker-block.speaker-2 {
    background: rgba(52, 199, 89, 0.06);
    border-left: 4px solid var(--success);
}

.preview-markdown .speaker-block.speaker-3 {
    background: rgba(255, 159, 10, 0.06);
    border-left: 4px solid var(--warning);
}

.preview-markdown .speaker-block.speaker-4 {
    background: rgba(255, 59, 48, 0.06);
    border-left: 4px solid var(--error);
}

.preview-markdown .speaker-block.speaker-5 {
    background: rgba(175, 82, 222, 0.06);
    border-left: 4px solid #af52de;
}

.preview-markdown .speaker-name {
    font-weight: 600;
    margin-bottom: 8px;
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-xs);
    font-size: var(--fs-md);
}

.preview-markdown .speaker-block.speaker-1 .speaker-name {
    background: rgba(0, 113, 227, 0.1);
    color: var(--primary);
}

.preview-markdown .speaker-block.speaker-2 .speaker-name {
    background: rgba(52, 199, 89, 0.1);
    color: var(--success);
}

.preview-markdown .speaker-block.speaker-3 .speaker-name {
    background: rgba(255, 159, 10, 0.1);
    color: #c77c00;
}

.preview-markdown .speaker-block.speaker-4 .speaker-name {
    background: rgba(255, 59, 48, 0.1);
    color: var(--error);
}

.preview-markdown .speaker-block.speaker-5 .speaker-name {
    background: rgba(175, 82, 222, 0.1);
    color: #af52de;
}

/* 深色模式下讲话人样式 */
[data-theme="dark"] .preview-markdown .speaker-block.speaker-1 {
    background: rgba(41, 151, 255, 0.1);
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-2 {
    background: rgba(48, 209, 88, 0.1);
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-3 {
    background: rgba(255, 214, 10, 0.1);
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-4 {
    background: rgba(255, 69, 58, 0.1);
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-5 {
    background: rgba(191, 90, 242, 0.1);
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-1 .speaker-name {
    background: rgba(0, 113, 227, 0.25);
    color: #a5b4fc;
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-2 .speaker-name {
    background: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-3 .speaker-name {
    background: rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-4 .speaker-name {
    background: rgba(236, 72, 153, 0.25);
    color: #f9a8d4;
}

[data-theme="dark"] .preview-markdown .speaker-block.speaker-5 .speaker-name {
    background: rgba(175, 82, 222, 0.25);
    color: #c4b5fd;
}

.preview-markdown .md-table-wrap {
    margin: 4px 0 1.1em;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.preview-markdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
    line-height: 1.6;
}

.preview-markdown th,
.preview-markdown td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.preview-markdown tbody tr:last-child td {
    border-bottom: none;
}

.preview-markdown th {
    background: rgba(0, 113, 227, 0.08);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.preview-markdown tr:hover td {
    background: rgba(0, 113, 227, 0.04);
}
/* 编辑模式样式 */
.edit-mode-toolbar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--input-bg);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.edit-mode-toolbar.show {
    display: flex;
}

.edit-mode-toolbar .toolbar-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary);
    margin-right: 8px;
}

.edit-mode-toolbar .toolbar-btn {
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.edit-mode-toolbar .toolbar-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
}

.edit-mode-toolbar .toolbar-btn.active {
    background: var(--primary);
    color: white;
}

.edit-mode-toolbar .toolbar-btn svg {
    width: 16px;
    height: 16px;
}

.edit-mode-toolbar .toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 8px;
}

[data-theme="dark"] .edit-mode-toolbar {
    background: var(--input-bg);
}

[data-theme="dark"] .edit-mode-toolbar .toolbar-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

[data-theme="dark"] .edit-mode-toolbar .toolbar-btn:hover,
[data-theme="dark"] .edit-mode-toolbar .toolbar-btn.active {
    background: var(--primary);
    color: white;
}

/* 编辑按钮：次要操作，进入编辑后高亮为"完成"状态 */
.btn-edit.editing {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

.btn-edit.editing:hover {
    background: var(--success);
    color: white;
}

/* 可编辑标题和正文 */
.preview-markdown.edit-mode h1,
.preview-markdown.edit-mode h2,
.preview-markdown.edit-mode h3,
.preview-markdown.edit-mode h4,
.preview-markdown.edit-mode p,
.preview-markdown.edit-mode li,
.preview-markdown.edit-mode blockquote {
    cursor: text;
    padding: 6px 10px;
    margin-left: -10px;
    margin-right: -10px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.preview-markdown.edit-mode h1:first-child {
    padding: 8px 12px;
    margin: -8px -12px 16px -12px;
    border-radius: var(--radius-sm);
}

.preview-markdown.edit-mode h1:hover,
.preview-markdown.edit-mode h2:hover,
.preview-markdown.edit-mode h3:hover,
.preview-markdown.edit-mode h4:hover,
.preview-markdown.edit-mode td:hover,
.preview-markdown.edit-mode th:hover,
.preview-markdown.edit-mode p:hover,
.preview-markdown.edit-mode li:hover,
.preview-markdown.edit-mode blockquote:hover {
    background: rgba(0, 113, 227, 0.06);
}

.preview-markdown.edit-mode h1:focus,
.preview-markdown.edit-mode h2:focus,
.preview-markdown.edit-mode h3:focus,
.preview-markdown.edit-mode h4:focus,
.preview-markdown.edit-mode td:focus,
.preview-markdown.edit-mode th:focus,
.preview-markdown.edit-mode p:focus,
.preview-markdown.edit-mode li:focus,
.preview-markdown.edit-mode blockquote:focus {
    outline: none;
    background: rgba(0, 113, 227, 0.1);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.3);
}

.preview-markdown.edit-mode .speaker-content p {
    margin-left: 0;
    margin-right: 0;
}

/* 高亮文本样式 */
.highlight-yellow {
    background: linear-gradient(180deg, transparent 60%, #fef08a 60%);
    padding: 0 2px;
}

.highlight-green {
    background: linear-gradient(180deg, transparent 60%, #bbf7d0 60%);
    padding: 0 2px;
}

.highlight-blue {
    background: linear-gradient(180deg, transparent 60%, #bfdbfe 60%);
    padding: 0 2px;
}

.highlight-pink {
    background: linear-gradient(180deg, transparent 60%, #fbcfe8 60%);
    padding: 0 2px;
}

[data-theme="dark"] .highlight-yellow {
    background: linear-gradient(180deg, transparent 60%, rgba(250, 204, 21, 0.4) 60%);
}

[data-theme="dark"] .highlight-green {
    background: linear-gradient(180deg, transparent 60%, rgba(34, 197, 94, 0.4) 60%);
}

[data-theme="dark"] .highlight-blue {
    background: linear-gradient(180deg, transparent 60%, rgba(59, 130, 246, 0.4) 60%);
}

[data-theme="dark"] .highlight-pink {
    background: linear-gradient(180deg, transparent 60%, rgba(236, 72, 153, 0.4) 60%);
}

/* Toast 通知 */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--text-primary);
    color: white;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    display: none;
    box-shadow: var(--shadow-xl);
    z-index: var(--z-toast);
    max-width: 400px;
}

.toast.show {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toastIn 0.4s ease;
}

.toast.error {
    background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%);
}

.toast.success {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
}

.toast.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.toast.info {
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
}

.toast-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

@keyframes toastIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 响应式 - 手机端 */
@media (max-width: 768px) {
    .container {
        padding: 16px;
    }

    header {
        padding: 40px 16px 32px;
    }

    header h1 {
        font-size: var(--fs-3xl);
    }

    .header-tagline {
        font-size: var(--fs-3xl);
    }

    .header-intro {
        padding: 0;
    }

    .header-intro p {
        font-size: var(--fs-md);
    }

    .header-features {
        gap: 8px 12px;
    }

    .header-features span {
        font-size: var(--fs-xs);
        padding: 6px 12px;
    }

    .logo {
        width: 60px;
        height: 60px;
        border-radius: var(--radius-lg);
        margin-bottom: 20px;
    }

    .logo svg {
        width: 30px;
        height: 30px;
    }

    .card {
        padding: 20px;
        border-radius: var(--radius-lg);
    }

    .upload-area {
        padding: 32px 16px;
    }

    .preview-stats {
        gap: 4px 12px;
    }

    .preview-toolbar .btn.btn-compact {
        flex: 1 1 auto;
        justify-content: center;
    }

    .preview-toolbar .export-menu {
        flex: 1 1 auto;
        display: flex;
    }

    .preview-toolbar .export-menu .btn {
        flex: 1;
    }

    .preview-markdown {
        padding: 14px 12px;
    }

    .preview-markdown h1 {
        font-size: 1.35em;
    }

    .preview-markdown h1,
    .preview-markdown h2,
    .preview-markdown h3 {
        scroll-margin-top: 72px;
    }

    .top-buttons {
        top: 12px;
        right: 12px;
    }

    .settings-btn, .lang-btn {
        padding: 6px 12px;
        font-size: var(--fs-xs);
    }

    .input-mode-tabs {
        flex-direction: column;
    }

    .language-options {
        flex-direction: column;
    }

    /* Sticky navbar 移动端 */
    .sticky-navbar {
        height: 48px;
    }

    .sticky-navbar-content {
        padding: 0 16px;
    }

    .sticky-navbar-logo .logo-icon {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-sm);
    }

    .sticky-navbar-logo .logo-icon svg {
        width: 28px;
        height: 28px;
    }

    .sticky-navbar-logo .logo-text {
        font-size: var(--fs-md);
    }
}

/* 小屏手机 */
@media (max-width: 480px) {
    .container {
        padding: 12px;
    }

    header h1 {
        font-size: var(--fs-3xl);
    }

    .header-tagline {
        font-size: var(--fs-3xl);
    }

    .header-features {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .header-features span {
        width: 100%;
        max-width: 200px;
        justify-content: center;
    }

    .card {
        padding: 16px;
    }

    .card-title {
        font-size: var(--fs-base);
    }

    .upload-area {
        padding: 24px 12px;
    }

    .upload-icon {
        width: 56px;
        height: 56px;
    }

    .upload-icon svg {
        width: 24px;
        height: 24px;
    }

    .btn {
        padding: 14px 20px;
        font-size: var(--fs-md);
    }
}

/* 手机端底部切换栏可见时，提示条移到切换栏上方 */
@media (max-width: 768px) {
    .toast {
        left: 16px;
        right: 16px;
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* 问笔记：右侧对话面板，宽屏时把工作台让出位置，窄屏时铺满 */
.note-chat {
    position: fixed;
    top: 72px;
    right: 16px;
    bottom: 16px;
    width: 420px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-popover);
    overflow: hidden;
    animation: note-chat-in 0.2s ease-out;
}

.note-chat[hidden] {
    display: none;
}

@keyframes note-chat-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 1100px) {
    body.note-chat-open .container {
        padding-right: 452px;
    }
}

@media (max-width: 1099px) {
    .note-chat {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        border-radius: 0;
        border: none;
        z-index: var(--z-modal);
    }
}

.note-chat-header {
    display: flex;
    align-items: center;
    gap: 4px;
    /* the page-level `header` rule centres with auto margins, which shrinks this bar in a flex column */
    margin: 0;
    max-width: none;
    padding: 14px 12px 12px 18px;
    border-bottom: 1px solid var(--border);
}

.note-chat-heading {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.note-chat .note-chat-heading h2 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.note-chat .note-chat-sub {
    margin: 2px 0 0;
    line-height: 1.4;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-chat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.note-chat-icon:hover,
.note-chat-icon:focus-visible {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.note-chat-icon svg {
    width: 18px;
    height: 18px;
}

.note-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overscroll-behavior: contain;
}

.note-chat-empty p {
    margin: 4px 2px 12px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

.note-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.note-chat-suggestion {
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.note-chat-suggestion:hover,
.note-chat-suggestion:focus-visible {
    background: var(--primary-soft);
    border-color: var(--primary-soft-strong);
    outline: none;
}

.note-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.note-chat-user {
    align-items: flex-end;
}

.note-chat-user .note-chat-body {
    max-width: 85%;
    padding: 9px 14px;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-sm);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.note-chat-assistant .note-chat-body {
    padding: 2px 2px 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-primary);
    word-break: break-word;
}

.note-chat-assistant .note-chat-body.preview-markdown {
    background: transparent;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 2px 2px 0;
    border: none;
    box-shadow: none;
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.note-chat-assistant .note-chat-body h1,
.note-chat-assistant .note-chat-body h2,
.note-chat-assistant .note-chat-body h3,
.note-chat-assistant .note-chat-body h4 {
    margin: 12px 0 6px;
    padding: 0;
    border: none;
    background: none;
    font-size: var(--fs-md);
}

.note-chat-assistant .note-chat-body > :first-child { margin-top: 0; }
.note-chat-assistant .note-chat-body > :last-child { margin-bottom: 0; }

.note-chat-assistant .note-chat-body p,
.note-chat-assistant .note-chat-body li {
    font-size: var(--fs-sm);
}

.note-chat-msg.is-error .note-chat-body {
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: var(--error-soft);
    color: var(--error);
}

.note-chat-meta {
    margin-top: 4px;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.note-chat-meta:empty {
    display: none;
}

.note-chat-typing {
    display: inline-flex;
    gap: 4px;
    padding: 8px 2px;
}

.note-chat-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: note-chat-dot 1.2s infinite ease-in-out;
}

.note-chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.note-chat-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes note-chat-dot {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.note-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 8px 12px 12px;
    padding: 6px 6px 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
}

.note-chat-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.note-chat-form textarea {
    flex: 1;
    min-height: 24px;
    max-height: 140px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.5;
    resize: none;
    outline: none;
}

.note-chat-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
}

.note-chat-send:disabled {
    opacity: 0.45;
    cursor: default;
}

.note-chat-send svg {
    width: 18px;
    height: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .note-chat,
    .note-chat-typing i {
        animation: none;
    }
}

/* 问所有笔记：标题栏入口、正文里的来源编号和来源列表 */
.library-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.library-chat-btn:hover,
.library-chat-btn:focus-visible,
.library-chat-btn[aria-expanded="true"] {
    background: var(--primary-soft);
    border-color: var(--primary-soft-strong);
    color: var(--primary);
    outline: none;
}

.library-chat-btn svg {
    width: 14px;
    height: 14px;
}

.library-cite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin: 0 1px;
    padding: 0 4px;
    border: none;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--primary);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    vertical-align: 1px;
    cursor: pointer;
}

.library-cite:hover,
.library-cite:focus-visible {
    background: var(--primary);
    color: #fff;
    outline: none;
}

.library-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.library-sources-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.library-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
}

.library-source:hover,
.library-source:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    outline: none;
}

.library-source-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
}

.library-source-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* css/admin.css */
/* ==================== 管理后台样式 ==================== */
.admin-sidebar {
    width: 180px;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.admin-nav-btn:hover {
    background: rgba(0, 113, 227, 0.1);
    color: var(--primary);
}

.admin-nav-btn.active {
    background: rgba(0, 113, 227, 0.1);
    color: var(--primary);
    font-weight: 500;
}

.admin-nav-btn svg {
    flex-shrink: 0;
}

/* 管理后台弹窗只有一个纵向滚动容器：右侧 admin-content。
   之前依赖 modal-content 的 max-height + flex 自动分配高度，生产浏览器里
   任务诊断页仍会被内容撑开。这里改成显式 grid：标题行自适应，内容行固定
   占满剩余高度，再让右侧内容区滚动，避免外层/内层互相吞滚轮事件。 */
#adminPanelModal {
    padding: 24px;
}

#adminPanelModal .admin-modal-content {
    width: min(1200px, calc(100vw - 48px));
    max-width: 1200px;
    height: calc(100vh - 48px);
    max-height: 90vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

#adminPanelModal .admin-modal-body {
    min-height: 0;
    height: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    overflow: hidden;
}

#adminPanelModal .admin-sidebar {
    width: auto;
    min-height: 0;
    overflow-y: auto;
}

#adminPanelModal .admin-content {
    height: 100%;
    max-height: none;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

#adminPanelModal #admin-tab-tasks.active {
    padding-bottom: 24px;
}

#adminPanelModal #admin-tab-tasks .admin-json-block {
    max-height: none;
    overflow: visible;
}

.admin-content {
    flex: 1;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
    background: var(--preview-bg);
}

.admin-tab-content {
    display: none;
}

.admin-tab-content.active {
    display: block;
}

.admin-tab-content h3 {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.admin-stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.users { background: linear-gradient(135deg, #0071e3 0%, #2997ff 100%); color: white; }
.stat-icon.active { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); color: white; }
.stat-icon.new { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); color: white; }
.stat-icon.revenue { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); color: white; }

.stat-info {
    height: 100%;
}

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

.stat-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.admin-detail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.admin-detail-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border);
}

.admin-detail-card h4 {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.membership-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.membership-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.membership-bar .label {
    width: 40px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.membership-bar .bar {
    flex: 1;
    min-width: 0;
    height: 8px;
    background: var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.membership-bar .fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}

.membership-bar .fill.free { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.membership-bar .fill.pro { background: linear-gradient(90deg, #0071e3, #2997ff); }
.membership-bar .fill.max { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.membership-bar .fill.ultra { background: linear-gradient(90deg, #7c3aed, #a855f7); }

.membership-bar .count {
    width: 40px;
    text-align: right;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.usage-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.usage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.usage-row:last-child {
    border-bottom: none;
}

.usage-row span:first-child {
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.usage-row span:last-child {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
}

.admin-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-toolbar input,
.admin-toolbar select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: var(--fs-md);
}

.admin-toolbar input {
    min-width: 200px;
}

.admin-toolbar label {
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.admin-table-container {
    overflow-x: auto;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.admin-table th {
    background: rgba(0, 113, 227, 0.05);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table td {
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover {
    background: rgba(0, 113, 227, 0.03);
}

.membership-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
}

.membership-badge.free { background: #e2e8f0; color: #475569; }
.membership-badge.pro { background: linear-gradient(135deg, #0071e3 0%, #2997ff 100%); color: white; }
.membership-badge.max { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); color: white; }
.membership-badge.ultra { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: white; }
.membership-badge.admin { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); color: white; }
.membership-badge.disabled { background: #fee2e2; color: #dc2626; }

.action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 6px;
}

.action-btn.view { background: #e0e7ff; color: #4f46e5; }
.action-btn.view:hover { background: #c7d2fe; }

.action-btn.edit { background: #d1fae5; color: #059669; }
.action-btn.edit:hover { background: #a7f3d0; }

.action-btn.disable { background: #fee2e2; color: #dc2626; }
.action-btn.disable:hover { background: #fecaca; }

.action-btn.enable { background: #d1fae5; color: #059669; }
.action-btn.enable:hover { background: #a7f3d0; }

.admin-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.admin-pagination button {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-pagination button:hover {
    background: rgba(0, 113, 227, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.admin-pagination button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.admin-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ip-abuse-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    overflow: hidden;
}

.ip-abuse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(239, 68, 68, 0.05);
    border-bottom: 1px solid var(--border);
}

.ip-abuse-header .ip-address {
    font-family: monospace;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
}

.ip-abuse-header .user-count {
    background: #fee2e2;
    color: #dc2626;
    padding: 4px 12px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.ip-abuse-users {
    padding: 12px 20px;
}

.ip-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.ip-user-item:last-child {
    border-bottom: none;
}

.ip-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ip-user-name {
    font-weight: 500;
    color: var(--text-primary);
}

.ip-user-email {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ip-user-date {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.user-detail-section {
    margin-bottom: 20px;
}

.user-detail-section h4 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.user-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.user-detail-row .label {
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.user-detail-row .value {
    font-weight: 500;
    color: var(--text-primary);
}

.user-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.membership-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: var(--fs-md);
}

@media (max-width: 768px) {
    .admin-sidebar {
        width: 60px;
        padding: 12px 4px;
    }

    .admin-nav-btn span {
        display: none;
    }

    .admin-nav-btn {
        justify-content: center;
        padding: 12px;
    }

    .admin-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .admin-detail-cards {
        grid-template-columns: 1fr;
    }
}

/* 深色模式：浅色底的状态标签/操作按钮改为半透明色调 */
[data-theme="dark"] .membership-badge.free {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

[data-theme="dark"] .membership-badge.disabled,
[data-theme="dark"] .action-btn.disable,
[data-theme="dark"] .ip-abuse-header .user-count {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

[data-theme="dark"] .action-btn.disable:hover {
    background: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .action-btn.view {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

[data-theme="dark"] .action-btn.view:hover {
    background: rgba(99, 102, 241, 0.32);
}

[data-theme="dark"] .action-btn.edit,
[data-theme="dark"] .action-btn.enable {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}

[data-theme="dark"] .action-btn.edit:hover,
[data-theme="dark"] .action-btn.enable:hover {
    background: rgba(16, 185, 129, 0.3);
}

/* 管理后台通用小部件（替代模板里的内联样式） */
.admin-placeholder {
    padding: 20px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.admin-placeholder.is-center {
    padding: 40px 20px;
    text-align: center;
}

.admin-table td.admin-empty-cell {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
}

.admin-gap-bottom {
    margin-bottom: 20px;
}

.admin-gap-bottom-sm {
    margin-bottom: 16px;
}

.admin-toolbar.admin-toolbar-tight {
    margin-bottom: 12px;
}

.admin-detail-card.admin-form-card {
    margin-bottom: 24px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.admin-form-grid .settings-field {
    margin: 0;
}

.admin-form-note {
    margin-top: 16px;
}

.settings-field select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md);
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.admin-form-actions .btn {
    width: auto;
    padding: 10px 20px;
    font-size: var(--fs-md);
}

.admin-form-actions .btn svg {
    width: 16px;
    height: 16px;
}


/* css/landing.css */
/* ==================== 着陆页样式 ==================== */
#landingPage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 52px; /* 补偿固定导航栏高度 */
}

/* 着陆页视图容器 */
.landing-view {
    display: none;
}

.landing-view.active {
    display: flex;
    flex-direction: column;
}

/* 着陆页导航栏 */
.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: var(--z-nav);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.landing-nav.nav-hidden {
    transform: translateY(-100%);
}

[data-theme="dark"] .landing-nav {
    background: rgba(29, 29, 31, 0.72);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.landing-nav-content {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: relative;
}

.landing-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
}

.landing-nav-logo .logo-icon {
    width: 32px;
    height: 32px;
}

.landing-nav-logo .logo-text {
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.landing-nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 40px;
}

.landing-nav-link {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.landing-nav-link:hover {
    color: var(--text-primary);
}

.landing-nav-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landing-nav-btn {
    padding: 8px 16px;
    font-size: var(--fs-sm);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    color: var(--text-primary);
}

.landing-nav-btn:hover {
    background: var(--input-bg);
}

.landing-nav-btn.primary {
    background: var(--primary);
    color: white;
}

.landing-nav-btn.primary:hover {
    background: var(--primary-dark);
}

.landing-nav-btn.lang-toggle {
    background: transparent;
    border: 1px solid var(--border);
}

.landing-nav-btn.lang-toggle:hover {
    background: var(--input-bg);
    border-color: var(--primary-light);
    color: var(--primary);
}

/* 首页各区块：锚点跳转时留出固定导航栏的高度 */
#landingViewHero > section {
    scroll-margin-top: 52px;
}

/* ---------- 首屏 ---------- */
.landing-hero {
    padding: 88px 24px 96px;
    background:
        radial-gradient(900px 420px at 88% -8%, var(--primary-soft-strong) 0%, transparent 65%),
        linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
}

.landing-hero-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin-bottom: 20px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.landing-hero h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.landing-hero h1 em {
    font-style: normal;
    color: var(--primary);
}

.landing-hero .description {
    max-width: 540px;
    margin-bottom: 32px;
    font-size: var(--fs-lg);
    line-height: 1.7;
    color: var(--text-secondary);
}

.landing-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.landing-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.landing-hero-btn:hover {
    transform: translateY(-1px);
}

.landing-hero-btn.primary {
    background: var(--primary);
    color: #fff;
}

.landing-hero-btn.primary:hover {
    background: var(--primary-dark);
}

.landing-hero-btn.secondary {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.landing-hero-btn.secondary:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.landing-hero-btn.inverse {
    background: #fff;
    color: #0071e3;
}

.landing-hero-btn.inverse:hover {
    background: #f0f6ff;
}

.landing-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.landing-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.landing-hero-points svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--success);
}

/* ---------- 首屏产品示意 ---------- */
.landing-demo {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    text-align: left;
}

.landing-demo-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--input-bg);
    border-bottom: 1px solid var(--border);
}

.landing-demo-bar .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.landing-demo-bar .dot.red { background: #ff5f57; }
.landing-demo-bar .dot.yellow { background: #febc2e; }
.landing-demo-bar .dot.green { background: #28c840; }

.landing-demo-title {
    margin-left: 10px;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.landing-demo-source {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 20px 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--input-bg);
}

.landing-demo-file-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
}

.landing-demo-file-icon svg {
    width: 20px;
    height: 20px;
}

.landing-demo-file {
    flex: 1;
    min-width: 0;
}

.landing-demo-file-name {
    overflow: hidden;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-demo-file-meta {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.landing-demo-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
}

.landing-demo-wave span {
    width: 3px;
    height: 40%;
    border-radius: 2px;
    background: var(--primary);
    opacity: 0.55;
}

.landing-demo-wave span:nth-child(3n) { height: 70%; }
.landing-demo-wave span:nth-child(4n) { height: 95%; }
.landing-demo-wave span:nth-child(5n) { height: 55%; }
.landing-demo-wave span:nth-child(7n) { height: 25%; }

.landing-demo-status {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--success-soft);
    color: var(--success);
    font-size: var(--fs-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.landing-demo-note {
    padding: 20px 24px 24px;
}

.landing-demo-note h3 {
    margin-bottom: 4px;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.landing-demo-label {
    margin: 14px 0 8px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
}

.landing-demo-note ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-demo-note li {
    position: relative;
    padding-left: 16px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

.landing-demo-note li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.landing-demo-note .landing-demo-todos li {
    padding-left: 20px;
}

.landing-demo-note .landing-demo-todos li::before {
    left: 0;
    top: 0.38em;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--text-muted);
    border-radius: 3px;
    background: transparent;
}

.landing-demo-tags {
    display: flex;
    gap: 6px;
    margin-top: 16px;
}

.landing-demo-tags span {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--input-bg);
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
}

/* ---------- 通用区块 ---------- */
.landing-section {
    padding: 96px 24px;
    background: var(--card-bg);
}

.landing-use-cases,
.landing-faq {
    background: var(--bg-gradient-end);
}

.landing-section-inner {
    max-width: 1160px;
    margin: 0 auto;
}

.landing-section-title {
    margin-bottom: 48px;
    text-align: center;
}

.landing-section-title h2 {
    margin-bottom: 12px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.landing-section-title p {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
}

/* ---------- 功能、场景卡片 ---------- */
.landing-features-grid,
.landing-use-cases-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.landing-feature-card,
.landing-use-case {
    padding: 28px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.landing-feature-card {
    background: var(--bg-gradient-start);
}

.landing-use-case {
    background: var(--card-bg);
}

.landing-feature-card:hover,
.landing-use-case:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.landing-feature-icon,
.landing-use-case-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

.landing-feature-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
}

.landing-use-case-icon {
    background: var(--primary-soft);
    color: var(--primary);
}

.landing-feature-icon svg,
.landing-use-case-icon svg {
    width: 24px;
    height: 24px;
}

.landing-feature-card h3,
.landing-use-case h3 {
    margin-bottom: 8px;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
}

.landing-feature-card p,
.landing-use-case p {
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ---------- 定价 ---------- */
.landing-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.landing-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 24px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-gradient-start);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.landing-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.landing-pricing-card.featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
}

.landing-pricing-card.ultra {
    border-color: #7c3aed;
    box-shadow: 0 0 0 1px #7c3aed, var(--shadow-md);
}

.landing-pricing-card.featured::before,
.landing-pricing-card.ultra::before {
    content: attr(data-badge);
    position: absolute;
    top: -12px;
    left: 24px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 600;
}

.landing-pricing-card.featured::before {
    background: var(--primary);
}

.landing-pricing-card.ultra::before {
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
}

.landing-pricing-tier {
    margin-bottom: 8px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-secondary);
}

.landing-pricing-price {
    margin-bottom: 20px;
}

.landing-pricing-price .currency {
    font-size: var(--fs-xl);
    color: var(--text-secondary);
}

.landing-pricing-price .amount {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.landing-pricing-price .period {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.landing-pricing-features {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.landing-pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

.landing-pricing-feature svg {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    stroke: var(--success);
}

.landing-pricing-btn {
    width: 100%;
    margin-top: auto;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.landing-pricing-btn.primary {
    background: var(--primary);
    color: #fff;
}

.landing-pricing-btn.primary:hover {
    background: var(--primary-dark);
}

.landing-pricing-btn.secondary {
    background: var(--input-bg);
    color: var(--text-primary);
}

.landing-pricing-btn.secondary:hover {
    background: var(--surface-hover);
}

.landing-pricing-btn.ultra {
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    color: #fff;
}

.landing-pricing-btn.ultra:hover {
    background: linear-gradient(90deg, #6d28d9 0%, #9333ea 100%);
}

/* ---------- 常见问题 ---------- */
.landing-faq-list {
    display: grid;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}

.landing-faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

.landing-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
    cursor: pointer;
}

.landing-faq-item summary::-webkit-details-marker {
    display: none;
}

.landing-faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.landing-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.landing-faq-item summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

.landing-faq-item p {
    padding: 0 20px 18px;
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ---------- 结尾行动号召 ---------- */
.landing-cta {
    padding: 88px 24px;
    text-align: center;
    background: linear-gradient(135deg, #0071e3 0%, #5e5ce6 100%);
    color: #fff;
}

.landing-cta h2 {
    margin-bottom: 12px;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.landing-cta p {
    margin-bottom: 28px;
    font-size: var(--fs-lg);
    opacity: 0.9;
}

/* 发展历程的入场动画 */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 发展历程 */
.landing-timeline {
    padding: 100px 24px;
    max-width: 900px;
    margin: 0 auto;
}

.timeline-container {
    position: relative;
    padding-left: 40px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 50%, var(--border) 100%);
}

.timeline-item {
    position: relative;
    padding-bottom: 40px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 4px;
    width: 18px;
    height: 18px;
    background: var(--card-bg);
    border: 3px solid var(--primary);
    border-radius: 50%;
    z-index: 1;
}

.timeline-item.timeline-future::before {
    border-color: var(--text-muted);
    border-style: dashed;
}

.timeline-date {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.timeline-item.timeline-future .timeline-date {
    color: var(--text-muted);
}

.timeline-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 8px rgba(0,0,0,0.04),
        0 12px 24px rgba(0,0,0,0.06);
    transform: translateX(0);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-content:hover {
    transform: translateX(8px);
    box-shadow:
        0 4px 8px rgba(0,0,0,0.06),
        0 12px 24px rgba(0,0,0,0.08),
        0 24px 48px rgba(0,0,0,0.12);
}

.timeline-content h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.timeline-item.timeline-future .timeline-content {
    border-style: dashed;
    background: transparent;
}

/* 页脚 */
.landing-footer {
    padding: 24px;
    background: var(--bg-gradient-end);
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.landing-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.landing-footer-logo .logo-icon {
    width: 28px;
    height: 28px;
}

.landing-footer-logo .logo-text {
    font-size: var(--fs-base);
    font-weight: 600;
}

.landing-footer-links {
    display: flex;
    gap: 32px;
}

.landing-footer-link {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.landing-footer-link:hover {
    color: var(--text-primary);
}

.landing-footer-copyright {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

/* ==================== 首页视觉与动效 ====================
   html.an-motion：<head> 内联脚本在用户未开启“减少动态效果”时加上，首屏动画不依赖外部脚本。
   html.an-reveal：bootstrap.js 就绪后加上，滚动入场的隐藏状态只在脚本能负责显示时才生效。 */

/* ---------- 首屏背景：极光 + 点阵 ---------- */
.landing-hero {
    --an-dot: rgba(0, 0, 0, 0.07);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

[data-theme="dark"] .landing-hero {
    --an-dot: rgba(255, 255, 255, 0.08);
}

.landing-hero::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(36% 42% at 18% 28%, rgba(0, 113, 227, 0.16), transparent 70%),
        radial-gradient(32% 40% at 82% 18%, rgba(124, 58, 237, 0.15), transparent 70%),
        radial-gradient(38% 36% at 62% 82%, rgba(14, 165, 233, 0.13), transparent 70%);
}

.landing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(var(--an-dot) 1px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}

.an-motion .landing-hero::before {
    animation: anAurora 18s ease-in-out infinite alternate;
}

@keyframes anAurora {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(4%, -3%, 0) scale(1.06); }
    100% { transform: translate3d(-4%, 3%, 0) scale(1); }
}

/* ---------- 标题渐变流光 ---------- */
.landing-hero h1 em {
    background: linear-gradient(90deg, #0071e3 0%, #7c3aed 30%, #0ea5e9 60%, #0071e3 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[data-theme="dark"] .landing-hero h1 em {
    background-image: linear-gradient(90deg, #2997ff 0%, #a78bfa 30%, #38bdf8 60%, #2997ff 100%);
}

.an-motion .landing-hero h1 em {
    animation: anShimmer 6s linear infinite;
}

@keyframes anShimmer {
    to { background-position: 200% center; }
}

/* ---------- 首屏入场 ---------- */
@keyframes anFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.an-motion .landing-hero-copy > * {
    animation: anFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.an-motion .landing-hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.an-motion .landing-hero-copy > :nth-child(3) { animation-delay: 0.12s; }
.an-motion .landing-hero-copy > :nth-child(4) { animation-delay: 0.18s; }
.an-motion .landing-hero-copy > :nth-child(5) { animation-delay: 0.24s; }

.an-motion .landing-demo-wrap {
    animation: anFadeUp 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- 按钮 ---------- */
.landing-hero-btn.primary {
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.32);
}

.landing-hero-btn.primary:hover {
    box-shadow: 0 12px 32px rgba(0, 113, 227, 0.42);
}

.landing-hero-btn.primary svg {
    transition: transform 0.2s ease;
}

.landing-hero-btn.primary:hover svg {
    transform: translateX(3px);
}

/* ---------- 产品示意：光晕、3D 倾斜、悬浮标签 ---------- */
.landing-demo-wrap {
    position: relative;
    isolation: isolate;
}

.landing-demo-glow {
    position: absolute;
    inset: 6% -4% -8%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(50% 50% at 40% 45%, rgba(0, 113, 227, 0.32), transparent 70%),
        radial-gradient(40% 45% at 78% 72%, rgba(124, 58, 237, 0.26), transparent 70%);
    filter: blur(28px);
}

.landing-demo {
    position: relative;
    transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-float-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

.landing-float-chip svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--primary);
}

.landing-float-chip.chip-link {
    top: -38px;
    left: -44px;
}

.landing-float-chip.chip-export {
    right: -24px;
    bottom: -18px;
}

.landing-float-chip.chip-export svg {
    color: #7c3aed;
}

.an-motion .landing-float-chip {
    animation: anFloat 6s ease-in-out infinite;
}

.an-motion .landing-float-chip.chip-export {
    animation-delay: -3s;
}

@keyframes anFloat {
    50% { translate: 0 -10px; }
}

/* ---------- 产品示意：处理中 -> 完成 的循环演示 ---------- */
.landing-demo-progress {
    height: 3px;
    margin: 12px 20px 0;
    overflow: hidden;
    border-radius: 2px;
    background: var(--input-bg);
    transition: opacity 0.4s ease;
}

.landing-demo-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    transform-origin: left center;
}

.landing-demo.is-working .landing-demo-progress span {
    animation: anProgress 2.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.landing-demo.is-done .landing-demo-progress {
    opacity: 0.35;
}

@keyframes anProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.landing-demo-status .status-working {
    display: none;
}

.landing-demo.is-working .landing-demo-status {
    background: var(--primary-soft);
    color: var(--primary);
}

.landing-demo.is-working .landing-demo-status .status-working {
    display: inline;
}

.landing-demo.is-working .landing-demo-status .status-done {
    display: none;
}

.landing-demo-wave span {
    transition: opacity 0.3s ease;
}

.landing-demo.is-working .landing-demo-wave span {
    opacity: 0.9;
    animation: anWave 0.8s ease-in-out infinite alternate;
}

.landing-demo.is-working .landing-demo-wave span:nth-child(2n) { animation-delay: -0.2s; }
.landing-demo.is-working .landing-demo-wave span:nth-child(3n) { animation-delay: -0.4s; }
.landing-demo.is-working .landing-demo-wave span:nth-child(4n) { animation-delay: -0.6s; }

@keyframes anWave {
    from { transform: scaleY(0.35); }
    to { transform: scaleY(1.15); }
}

/* 处理中时笔记区先显示占位条 */
.landing-demo-note {
    position: relative;
}

.landing-demo.is-working .landing-demo-note::before {
    content: '';
    position: absolute;
    inset: 22px 24px 24px;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, transparent 0%, var(--card-bg) 50%, transparent 100%),
        linear-gradient(var(--input-bg), var(--input-bg)),
        linear-gradient(var(--input-bg), var(--input-bg)),
        linear-gradient(var(--input-bg), var(--input-bg)),
        linear-gradient(var(--input-bg), var(--input-bg)),
        linear-gradient(var(--input-bg), var(--input-bg)),
        linear-gradient(var(--input-bg), var(--input-bg));
    background-repeat: no-repeat;
    background-size: 40% 100%, 45% 16px, 30% 10px, 90% 10px, 80% 10px, 30% 10px, 70% 10px;
    background-position: -60% 0, 0 0, 0 44px, 0 70px, 0 96px, 0 136px, 0 162px;
    border-radius: 6px;
    animation: anSkeleton 1.2s ease-in-out infinite;
}

@keyframes anSkeleton {
    to { background-position: 160% 0, 0 0, 0 44px, 0 70px, 0 96px, 0 136px, 0 162px; }
}

.landing-demo.is-animated .demo-step {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.landing-demo.is-animated .demo-step.is-shown {
    opacity: 1;
    transform: none;
}

/* ---------- 格式与来源滚动条带 ---------- */
.landing-marquee {
    padding: 28px 0 32px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.landing-marquee-caption {
    margin-bottom: 16px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.landing-marquee-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.landing-marquee-track {
    display: flex;
    width: max-content;
}

.landing-marquee-list {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 12px 0 0;
    list-style: none;
}

.landing-marquee-list li {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-gradient-end);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}

.an-motion .landing-marquee-track {
    animation: anMarquee 40s linear infinite;
}

html:not(.an-motion) .landing-marquee-viewport {
    overflow-x: auto;
    scrollbar-width: none;
}

html:not(.an-motion) .landing-marquee-list[aria-hidden="true"] {
    display: none;
}

.landing-marquee-viewport:hover .landing-marquee-track {
    animation-play-state: paused;
}

@keyframes anMarquee {
    to { transform: translateX(-50%); }
}

/* ---------- 功能：不等宽网格 ---------- */
.landing-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.landing-bento .bento-wide {
    grid-column: span 2;
}

.landing-bento .landing-feature-card {
    display: flex;
    flex-direction: column;
}

.bento-visual {
    margin-top: auto;
    padding-top: 24px;
}

.bento-transcript {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bento-transcript-text {
    flex: 1.4;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.bento-transcript-text mark {
    padding: 1px 3px;
    border-radius: 4px;
    background: linear-gradient(var(--primary-soft-strong), var(--primary-soft-strong)) no-repeat 0 0 / 100% 100%;
    color: var(--text-primary);
    font-weight: 600;
}

.an-reveal .bento-transcript-text mark {
    background-size: 0% 100%;
    transition: background-size 0.8s 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.an-reveal .is-visible .bento-transcript-text mark {
    background-size: 100% 100%;
}

.bento-arrow {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--primary);
}

.bento-bullets {
    flex: 1;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bento-bullets li {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.bento-doc {
    display: grid;
    gap: 7px;
}

.bento-doc span {
    height: 7px;
    border-radius: 4px;
    background: var(--input-bg);
}

.bento-doc span.h {
    width: 45%;
    height: 9px;
    margin-top: 4px;
    background: var(--primary-soft-strong);
}

.bento-doc span.s {
    width: 70%;
}

.bento-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.bento-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--primary);
}

.bento-link-url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bento-link-go {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-2xs);
}

.bento-export {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bento-export .pill {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.bento-export .pill.translate {
    border-color: transparent;
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    color: #fff;
}

.landing-bento .bento-full {
    grid-column: 1 / -1;
}

.bento-models {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.bento-models .model-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.model-chip-tier {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    line-height: 16px;
    background: var(--input-bg);
    color: var(--text-secondary);
}

.model-chip-tier.tier-pro { background: rgba(0, 113, 227, 0.1); color: #0071e3; }
.model-chip-tier.tier-max { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.model-chip-tier.tier-ultra { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
[data-theme="dark"] .model-chip-tier.tier-pro { color: #64b5ff; }
[data-theme="dark"] .model-chip-tier.tier-max { color: #fbbf24; }
[data-theme="dark"] .model-chip-tier.tier-ultra { color: #c4a5ff; }
/* ---------- 卡片：鼠标跟随的光斑 ---------- */
@media (hover: hover) and (pointer: fine) {
    .landing-feature-card:hover,
    .landing-use-case:hover,
    .landing-pricing-card:not(.featured):not(.ultra):hover {
        border-color: var(--primary-soft-strong);
        background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--primary-soft), transparent 60%);
    }
}

/* ---------- Pro 卡片：旋转渐变描边 ---------- */
@property --an-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.landing-pricing-card.featured {
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--bg-gradient-start), var(--bg-gradient-start)) padding-box,
        conic-gradient(from var(--an-angle), #0071e3, #7c3aed, #0ea5e9, #0071e3) border-box;
    box-shadow: 0 18px 48px rgba(0, 113, 227, 0.18);
}

.an-motion .landing-pricing-card.featured {
    animation: anSpin 6s linear infinite;
}

@keyframes anSpin {
    to { --an-angle: 360deg; }
}

/* ---------- 结尾行动号召：流动光斑 + 网格 ---------- */
.landing-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(120deg, #0060c7 0%, #4f46e5 55%, #7c3aed 100%);
}

.landing-cta::before {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(25% 30% at 25% 35%, rgba(56, 189, 248, 0.45), transparent 70%),
        radial-gradient(25% 30% at 75% 65%, rgba(236, 72, 153, 0.32), transparent 70%);
}

.landing-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 75%);
}

.an-motion .landing-cta::before {
    animation: anAurora 14s ease-in-out infinite alternate;
}

.landing-cta .landing-hero-btn.inverse {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

/* ---------- 滚动入场 ---------- */
.an-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.an-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.an-reveal .landing-bento > [data-reveal]:nth-child(2),
.an-reveal .landing-use-cases-grid > [data-reveal]:nth-child(2),
.an-reveal .landing-pricing-grid > [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.an-reveal .landing-bento > [data-reveal]:nth-child(3),
.an-reveal .landing-use-cases-grid > [data-reveal]:nth-child(3),
.an-reveal .landing-pricing-grid > [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.an-reveal .landing-bento > [data-reveal]:nth-child(5) { transition-delay: 0.32s; }
.an-reveal .landing-bento > [data-reveal]:nth-child(4),
.an-reveal .landing-use-cases-grid > [data-reveal]:nth-child(4),
.an-reveal .landing-pricing-grid > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* 着陆页响应式 */
@media (max-width: 1100px) {
    .landing-features-grid,
    .landing-use-cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .landing-hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .landing-hero-copy {
        text-align: center;
    }

    .landing-hero .description {
        margin-left: auto;
        margin-right: auto;
    }

    .landing-hero-buttons,
    .landing-hero-points {
        justify-content: center;
    }

    .landing-demo {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .landing-nav-links {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .landing-nav-links {
        position: static;
        transform: none;
        gap: 16px;
    }

    .landing-nav-link {
        font-size: var(--fs-xs);
    }

    .landing-nav-buttons {
        gap: 8px;
    }

    .landing-nav-btn {
        padding: 6px 12px;
        font-size: var(--fs-xs);
    }

    .landing-nav-btn.primary {
        display: none;
    }

    .landing-hero {
        padding: 48px 20px 64px;
    }

    .landing-hero h1 {
        font-size: 36px;
    }

    .landing-hero .description {
        font-size: var(--fs-base);
    }

    .landing-section {
        padding: 64px 20px;
    }

    .landing-section-title {
        margin-bottom: 32px;
    }

    .landing-section-title h2,
    .landing-cta h2 {
        font-size: 28px;
    }

    .landing-section-title p,
    .landing-cta p {
        font-size: var(--fs-base);
    }

    .landing-cta {
        padding: 64px 20px;
    }

    .landing-footer-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .landing-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .landing-features-grid,
    .landing-use-cases-grid,
    .landing-pricing-grid {
        grid-template-columns: 1fr;
    }

    .landing-pricing-grid {
        max-width: 420px;
    }

    .landing-demo-wave {
        display: none;
    }
}

@media (max-width: 480px) {
    .landing-nav-links {
        display: none;
    }

    .landing-nav-btn.primary {
        display: block;
        padding: 6px 10px;
        font-size: var(--fs-2xs);
    }

    .landing-nav-btn {
        padding: 6px 10px;
        font-size: var(--fs-2xs);
    }

    .landing-hero h1 {
        font-size: 32px;
    }

    .landing-hero-buttons {
        flex-direction: column;
    }

    .landing-hero-btn {
        width: 100%;
    }

    .landing-demo-note {
        padding: 16px 18px 20px;
    }
}

/* 首页动效相关的响应式调整 */
@media (max-width: 900px) {
    .landing-float-chip.chip-link {
        left: 8px;
    }

    .landing-float-chip.chip-export {
        right: 8px;
    }

    .landing-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .landing-float-chip {
        display: none;
    }

    .landing-bento {
        grid-template-columns: 1fr;
    }

    .landing-bento .bento-wide {
        grid-column: auto;
    }

    .bento-transcript {
        flex-direction: column;
        align-items: stretch;
    }

    .bento-arrow {
        align-self: center;
        transform: rotate(90deg);
    }
}