/* 设计令牌已统一迁移至 frontend-base.css（基础层），本文件不再重复定义，避免两套令牌冲突。
   强调色由 class-frontend-assets.php::inject_frontend_tokens() 按后台「主题强调色」动态覆盖。 */
/* ---- 深色模式：CSS 变量覆盖 ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-cn-no-dark]) {
        --fl-text: #e5e7eb;
        --fl-text-light: #9ca3af;
        --fl-text-muted: #6b7280;
        --fl-bg: #1f2937;
        --fl-bg-light: #111827;
        --fl-bg-card: #1f2937;
        --fl-bg-subtle: #111827;
        --fl-border: #374151;
        --fl-border-strong: #4b5563;
        --fl-shadow: 0 2px 10px rgba(0,0,0,0.4);
        --fl-shadow-sm: 0 1px 4px rgba(0,0,0,0.35);
        --fl-shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
        /* 新增变量深色值 */
        --fl-primary-soft: rgba(99, 130, 246, 0.2);
        --fl-bg-success: rgba(40, 167, 69, 0.18);
        --fl-text-success: #75b798;
        --fl-border-success: rgba(40, 167, 69, 0.4);
        --fl-bg-danger: rgba(220, 53, 69, 0.18);
        --fl-text-danger: #e6a1a9;
        --fl-border-danger: rgba(220, 53, 69, 0.4);
        --fl-bg-warning: rgba(253, 126, 20, 0.18);
        --fl-text-warning: #f1b984;
        --fl-border-warning: rgba(253, 126, 20, 0.4);
        --fl-neutral-bg: #2c3338;
        --fl-neutral-bg-hover: #3c434a;
        --fl-neutral-text: #b0b7bf;
    }
}
/* 主题声明 dark 类时同样覆盖（优先级高于 prefers-color-scheme）
 * 覆盖 40+ 深色变体：国产主题(Zibll dark-theme/night-theme) + 国际主题(dark-mode/is-dark/theme-dark/skin-dark 等) + Tailwind(dark) + Bootstrap 5.3(data-bs-theme)
 * 关键：变量设到 html/body 全局级 → 任何后代（包括 .cn-modal-dialog 这种 wrapper 外层的元素）都能继承 */
html.cn-is-dark, body.cn-is-dark,
html.dark, html.dark-mode, html.is-dark, html.theme-dark, html.dark-theme, html.night-theme,
html.skin-dark, html.force-dark, html.dim, html.fl-dark, html.force-dark, html.night,
html[data-bs-theme="dark"], html[data-code-theme="dark"], html[data-theme="dark"], html[data-color-scheme="dark"],
body.dark, body.dark-mode, body.is-dark, body.theme-dark, body.dark-theme, body.night-theme,
body.skin-dark, body.night, body.dim, body.puock-dark, body.puock-dark-mode,
/* WP 后台深色模式（用户档案勾选触发 body.color-scheme-dark）—— Gutenberg 区块编辑器里生效 */
body.color-scheme-dark {
    --fl-text: #e5e7eb;
    --fl-text-light: #9ca3af;
    --fl-text-muted: #6b7280;
    --fl-bg: #1f2937;
    --fl-bg-light: #111827;
    --fl-bg-card: #1f2937;
    --fl-bg-subtle: #111827;
    --fl-border: #374151;
    --fl-border-strong: #4b5563;
    --fl-shadow: 0 2px 10px rgba(0,0,0,0.4);
    --fl-shadow-sm: 0 1px 4px rgba(0,0,0,0.35);
    --fl-shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    /* 新增变量深色值 */
    --fl-primary-soft: rgba(99, 130, 246, 0.2);
    --fl-bg-success: rgba(40, 167, 69, 0.18);
    --fl-text-success: #75b798;
    --fl-border-success: rgba(40, 167, 69, 0.4);
    --fl-bg-danger: rgba(220, 53, 69, 0.18);
    --fl-text-danger: #e6a1a9;
    --fl-border-danger: rgba(220, 53, 69, 0.4);
    --fl-bg-warning: rgba(253, 126, 20, 0.18);
    --fl-text-warning: #f1b984;
    --fl-border-warning: rgba(253, 126, 20, 0.4);
    --fl-neutral-bg: #2c3338;
    --fl-neutral-bg-hover: #3c434a;
    --fl-neutral-text: #b0b7bf;
}

.cn-apply-form-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.cn-apply-header {
    text-align: left;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
    padding: 8px 12px;
    background: var(--fl-bg-card, #fff);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow, 0 2px 10px rgba(0,0,0,0.08));
    border: 1px solid var(--fl-border, #e9ecef);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

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

.cn-apply-header .cn-form-title{
    margin: 0;
    padding: 0;
    color: var(--fl-text, #333);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.5;
    position: relative;
    padding-bottom: 4px;
    /* 覆盖主题给内容区 h3 画的下边框/伪元素线条（如 Puock 的蓝色下划线），
       统一接管为主题强调色短线 */
    border-bottom: none;
    background-image: none;
}
.cn-apply-header .cn-form-title::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background: var(--fl-primary);
    transition: width 0.25s ease, background 0.3s ease;
}
.cn-apply-header .cn-form-title:hover::after{
    width: 100%;
    background: linear-gradient(90deg, var(--fl-primary), var(--fl-primary-dark));
}

.cn-apply-header .cn-form-description{
    margin: 0;
    padding: 0;
    color: var(--fl-text-muted, #666);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.cn-apply-form {
    background: var(--fl-bg-card, #fff);
    padding: 14px;
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow, 0 2px 10px rgba(0,0,0,0.08));
    border: 1px solid var(--fl-border, #e9ecef);
}

.cn-apply-form .cn-form-group {
    margin-bottom: 10px;
    text-align: left !important;
}
.cn-apply-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--fl-text, #333);
    font-size: 14px;
    text-align: left !important;
}

.cn-apply-form .cn-required {
    color: var(--fl-danger, #e74c3c);
}

.cn-apply-form .cn-description {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--fl-text-muted, #6c757d);
    line-height: 1.5;
}

/* 已登录用户提示：与说明文字统一字号，颜色跟随主题强调色 */
.cn-apply-form .cn-logged-in-info {
    margin: 0;
    font-size: 12px;
    color: var(--fl-primary);
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cn-apply-form .cn-logged-in-info .cn-icon {
    flex: none;
}
.cn-apply-form .cn-email-reveal {
    cursor: pointer;
    color: var(--fl-primary);
    border-bottom: 1px dashed var(--fl-primary);
    font-family: 'Courier New', monospace;
    font-weight: 600;
    user-select: none;
}
.cn-apply-form .cn-email-reveal:hover {
    color: var(--fl-primary-dark);
}

/* 管理员自动通过提示行：图标与文字同行，颜色跟随主题强调色
   （.cn-coolnew-page svg{display:block} 会打断内联，这里用 flex 保证图标与首行文字同线） */
.cn-apply-form .cn-description-admin {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--fl-primary);
}
.cn-apply-form .cn-description-admin .cn-icon {
    flex: none;
    width: 1em;
    height: 1em;
    margin-top: 2px;
}

/* 非管理员只读显示默认分类 */
.cn-apply-form input.cn-readonly-category {
    background: var(--fl-bg-subtle, #f8f9fa);
    color: var(--fl-text-muted, #6c757d);
    cursor: not-allowed;
}

/* 输入框 + 操作按钮组合：始终同一行，按钮自适应不挤占输入框 */
.cn-apply-form .cn-input-group,
.cn-apply-form .cn-email-code-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}
.cn-apply-form .cn-input-group input,
.cn-apply-form .cn-email-code-row input {
    flex: 1 1 auto;
    min-width: 0;
}
.cn-apply-form .cn-input-group .button,
.cn-apply-form .cn-email-code-row .button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

.cn-apply-form #cn-change-code {
    letter-spacing: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.cn-apply-form input[type="text"],
.cn-apply-form input[type="url"],
.cn-apply-form input[type="email"],
.cn-apply-form select,
.cn-apply-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--fl-border, #e9ecef);
    border-radius: var(--fl-radius-sm);
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--fl-bg-card, #fff);
    color: var(--fl-text, #333);
    box-sizing: border-box;
}

.cn-apply-form input[type="text"]:focus,
.cn-apply-form input[type="url"]:focus,
.cn-apply-form input[type="email"]:focus,
.cn-apply-form select:focus,
.cn-apply-form textarea:focus {
    border-color: var(--fl-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--fl-primary-soft);
}

/* 下拉框：去除原生箭头，统一为自定义箭头，抵抗主题全局覆盖（apply / 更换弹窗共用） */
.cn-apply-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--fl-bg-card, #fff) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    padding-right: 34px !important;
    cursor: pointer;
}
/* 深色模式下箭头颜色太暗 → 用 filter 让它变亮 */
:is(html.cn-is-dark, html.dark, html.dark-mode, html.is-dark, html.theme-dark, html.dark-theme,
    html.night-theme, html.skin-dark, html.force-dark, html.dim, html.fl-dark,
    html[data-bs-theme="dark"], html[data-code-theme="dark"],
    body.cn-is-dark, body.dark, body.is-dark, body.theme-dark, body.dark-theme, body.night-theme,
    body.skin-dark, body.puock-dark) .cn-apply-form select,
@media (prefers-color-scheme: dark) {
    .cn-apply-form select { filter: brightness(1.5); }
}

/* 更换友链按钮内的图标：去掉主题可能强加的背景/描边 */
.cn-change-trigger svg,
.cn-change-trigger .cn-icon {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.cn-apply-form .cn-email-code-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.cn-apply-form .cn-email-code-row input {
    flex: 1 1 auto;
}
.cn-apply-form .cn-email-code-row .button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ===== 模态框（[cn_web_nav_modal]） ===== */
.cn-modal-wrap {
    display: inline-block;
}

.cn-modal-trigger {
    cursor: pointer;
}

.cn-modal-trigger-button {
    display: inline-block;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: var(--fl-primary);
    border: none;
    border-radius: var(--fl-radius-sm);
    transition: background 0.2s ease, transform 0.1s ease;
}
.cn-modal-trigger-button:hover {
    background: var(--fl-primary-dark);
    transform: translateY(-1px);
}

.cn-modal-trigger-link {
    color: var(--fl-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--fl-primary);
}
.cn-modal-trigger-link:hover {
    color: var(--fl-primary-dark);
}

.cn-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99980;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.cn-modal.cn-is-open {
    display: flex;
}

.cn-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.cn-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    background: var(--fl-bg-card, #fff);
    border-radius: var(--fl-radius-lg);
    box-shadow: var(--fl-shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.25));
    padding: 24px;
    box-sizing: border-box;
    animation: cn-modal-in 0.2s ease;
}

@keyframes cn-modal-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cn-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    color: var(--fl-text-light, #94a3b8);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.cn-modal-close:hover {
    color: var(--fl-text, #334155);
    background: var(--fl-bg-subtle, #f1f5f9);
}

@media (max-width: 480px) {
    .cn-modal { padding: 16px 8px; }
    .cn-modal-dialog { padding: 18px; }
}

.cn-apply-form .cn-form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.cn-apply-form .cn-form-row .cn-form-group {
    flex: 1;
    min-width: 200px;
}

.cn-apply-form .cn-input-group {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.cn-apply-form .cn-input-group input {
    flex: 1;
}

.cn-apply-form .cn-input-group .button {
    white-space: nowrap;
    flex-shrink: 0;
}

.cn-apply-form .cn-icon-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cn-apply-form .cn-icon-wrapper input {
    flex: 1;
}

.cn-apply-form .cn-icon-preview {
    width: 40px;
    height: 40px;
    border-radius: var(--fl-radius);
    background: var(--fl-bg-subtle, #f8f9fa);
    border: 2px solid var(--fl-border, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.cn-apply-form .cn-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--fl-radius-sm);
}

.cn-apply-form .cn-icon-preview.cn-empty {
    background: var(--fl-bg-subtle, #f8f9fa) url('../image/default-link.svg') center center / 22px 22px no-repeat;
}

.cn-apply-form .cn-icon-preview.cn-empty::after {
    content: none;
}

.cn-apply-form .button {
    background: var(--fl-primary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: var(--fl-radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cn-apply-form .button:hover {
    background: var(--fl-primary);
    box-shadow: 0 4px 12px var(--fl-primary-soft);
}

.cn-apply-form .button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.cn-apply-form .button-secondary {
    /* 次要按钮：中性底 + 强调色文字/描边，与共享 .cn-btn--secondary 视觉一致，
       跟随后台「主题强调色」（原为写死的蓝） */
    background: var(--fl-bg);
    color: var(--fl-primary);
    border: 1px solid var(--fl-primary-soft);
    padding: 12px 24px;
    border-radius: var(--fl-radius);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 15px var(--fl-primary-soft);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-apply-form .button-secondary:hover {
    background: var(--fl-primary-soft);
    border-color: var(--fl-primary);
    color: var(--fl-primary-dark);
    box-shadow: 0 6px 20px var(--fl-primary-soft);
    transform: translateY(-2px);
}

.cn-apply-form .button-secondary:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px var(--fl-primary-soft);
}



.cn-apply-form .cn-form-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 14px;
}

.cn-apply-form .cn-form-message {
    margin-top: 14px;
    padding: 14px 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--fl-shadow-sm, 0 1px 4px rgba(0,0,0,0.1));
}

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

.cn-apply-form .cn-form-message.cn-success {
    background: var(--fl-bg-success, #d4edda);
    color: var(--fl-text-success, #155724);
    border: 2px solid var(--fl-border-success, #b8dabc);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.25);
}

.cn-apply-form .cn-form-message.cn-error {
    background: var(--fl-bg-danger, #f8d7da);
    color: var(--fl-text-danger, #721c24);
    border: 2px solid var(--fl-border-danger, #f1b0b7);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.25);
}

/* 弹窗样式 */
.cn-notice-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99996;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cn-notice-modal.cn-show {
    opacity: 1;
    visibility: visible;
}

.cn-notice-modal .cn-notice-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.cn-notice-modal .cn-notice-content {
    position: relative;
    background: var(--fl-bg-card, #fff);
    border-radius: 16px;
    box-shadow: var(--fl-shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.3));
    max-width: 400px;
    width: 90%;
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.cn-notice-modal.cn-show .cn-notice-content {
    transform: scale(1) translateY(0);
}

.cn-notice-modal .cn-notice-header {
    padding: 30px 30px 15px;
    text-align: center;
    background: var(--fl-primary);
}

.cn-notice-modal.cn-success .cn-notice-header {
    background: var(--fl-success, #28a745);
}

.cn-notice-modal.cn-error .cn-notice-header {
    background: var(--fl-danger, #dc3545);
}

.cn-notice-modal .cn-notice-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
    /* 图标位于彩色（成功/失败/强调色）表头之上，必须显式取白色：
       此前无 color 声明，图标继承正文色，在绿色表头上呈深色、几乎看不清 */
    color: #fff;
    line-height: 0;
}

/* 图标内部的描边色跟随上面的 color，避免主题对 svg 的 stroke 覆盖 */
.cn-notice-modal .cn-notice-icon svg {
    fill: none;
    stroke: currentColor;
}

.cn-notice-modal .cn-notice-header .cn-notice-title {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.cn-notice-modal .cn-notice-body {
    padding: 25px 30px;
    text-align: center;
}

.cn-notice-modal .cn-notice-body p {
    margin: 0;
    font-size: 16px;
    color: var(--fl-text, #333);
    line-height: 1.6;
}

.cn-notice-modal .cn-notice-footer {
    padding: 0 30px 30px;
    text-align: center;
}

.cn-notice-modal .cn-notice-close-btn {
    background: var(--fl-primary);
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--fl-primary-soft);
}

.cn-notice-modal .cn-notice-close-btn:hover {
    background: var(--fl-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--fl-primary-soft);
}

/* 验证码弹窗样式 */
.cn-captcha-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cn-captcha-modal.cn-show {
    opacity: 1;
    visibility: visible;
}

.cn-captcha-modal .cn-captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.cn-captcha-modal .cn-captcha-content {
    position: relative;
    background: var(--fl-bg-card, #fff);
    border-radius: 16px;
    box-shadow: var(--fl-shadow-lg, 0 20px 60px rgba(0,0,0,0.3));
    max-width: 360px;
    width: 90%;
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.cn-captcha-modal.cn-show .cn-captcha-content {
    transform: scale(1) translateY(0);
}

.cn-captcha-modal .cn-captcha-header {
    padding: 24px 24px 14px;
    text-align: center;
    background: var(--fl-primary);
}

.cn-captcha-modal .cn-captcha-header .cn-captcha-title {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
}

.cn-captcha-modal .cn-captcha-body {
    padding: 20px 24px;
    text-align: center;
}

.cn-captcha-modal .cn-captcha-tip {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--fl-text-muted, #666);
    line-height: 1.6;
}

.cn-captcha-modal .cn-captcha-image-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.cn-captcha-modal .cn-captcha-image {
    width: 132px;
    height: 46px;
    border: 1px solid var(--fl-border-strong, #e2e8f0);
    border-radius: var(--fl-radius);
    background: var(--fl-neutral-bg, #f1f5f9);
    cursor: pointer;
    user-select: none;
}

.cn-captcha-modal .cn-captcha-refresh {
    width: 42px;
    height: 46px;
    border: 1px solid var(--fl-border-strong, #e2e8f0);
    background: var(--fl-bg-subtle, #f8fafc);
    border-radius: var(--fl-radius);
    color: var(--fl-neutral-text, #475569);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.cn-captcha-modal .cn-captcha-refresh:hover {
    background: var(--fl-neutral-bg-hover, #e2e8f0);
    color: var(--fl-primary);
}

.cn-captcha-modal .cn-captcha-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cn-captcha-modal .cn-captcha-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid var(--fl-border-strong, #cbd5e1);
    border-radius: var(--fl-radius);
    font-size: 16px;
    text-align: center;
    letter-spacing: 6px;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cn-captcha-modal .cn-captcha-input:focus {
    border-color: var(--fl-primary);
    box-shadow: 0 0 0 3px var(--fl-primary-soft);
}

.cn-captcha-modal .cn-captcha-error {
    margin: 10px 0 0;
    min-height: 18px;
    font-size: 13px;
    color: var(--fl-danger, #dc2626);
}

.cn-captcha-modal .cn-captcha-footer {
    display: flex;
    gap: 10px;
    padding: 0 24px 24px;
}

.cn-captcha-modal .cn-captcha-cancel,
.cn-captcha-modal .cn-captcha-confirm {
    flex: 1;
    padding: 11px 0;
    border-radius: var(--fl-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.cn-captcha-modal .cn-captcha-cancel {
    background: var(--fl-neutral-bg, #f1f5f9);
    color: var(--fl-neutral-text, #475569);
}

.cn-captcha-modal .cn-captcha-cancel:hover {
    background: var(--fl-neutral-bg-hover, #e2e8f0);
}

.cn-captcha-modal .cn-captcha-confirm {
    background: var(--fl-primary);
    color: #fff;
    box-shadow: 0 4px 15px var(--fl-primary-soft);
}

.cn-captcha-modal .cn-captcha-confirm:hover {
    background: var(--fl-primary-dark);
    transform: translateY(-2px);
}

.cn-captcha-modal .cn-captcha-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 更换友链按钮：内联在申请头部描述之后，紧凑尺寸 */
.cn-change-trigger {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--fl-primary);
    color: #fff;
    border: none;
    border-radius: var(--fl-radius-sm);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px var(--fl-primary-soft);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cn-change-trigger i {
    font-size: 11px;
}

.cn-change-trigger:hover {
    background: var(--fl-primary-dark);
    color: #fff;
    box-shadow: 0 2px 8px var(--fl-primary-soft);
}

.cn-change-trigger:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--fl-primary-soft);
}

.cn-change-trigger:cn-active {
    transform: translateY(1px);
    box-shadow: none;
}

.cn-apply-header .cn-change-trigger {
    align-self: center;
    margin-left: 4px;
}

/* 更换友链弹窗 */
.cn-change-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cn-change-modal.cn-show {
    opacity: 1;
    visibility: visible;
}

body.cn-modal-open {
    overflow: hidden;
}

.cn-change-modal .cn-change-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.cn-change-modal .cn-change-content {
    position: relative;
    background: var(--fl-bg-card, #fff);
    border: 1px solid var(--fl-border, #eef2f7);
    border-radius: 14px;
    box-shadow: var(--fl-shadow-lg, 0 24px 60px rgba(15, 23, 42, 0.18));
    max-width: 560px;
    min-width: min(460px, 92vw);
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    transform: scale(0.85) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 防止主题挤压：获取验证码按钮始终保持圆角与固有尺寸 */
.cn-change-modal #cn-change-send-code{ flex:0 0 auto; border-radius:8px !important; }
.cn-change-modal .cn-input-group input{ flex:1 1 auto; min-width:0; }

.cn-change-modal.cn-show .cn-change-content {
    transform: scale(1) translateY(0);
}

.cn-change-modal .cn-change-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--fl-bg-card, #fff);
    border-bottom: 1px solid var(--fl-border, #eef2f7);
    border-radius: 14px 14px 0 0;
}

/* 弹窗标题：span 元素 + 全量重置，彻底隔离主题标题样式（h1-h6 规则不再匹配） */
.cn-change-modal .cn-change-header .cn-form-title {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    background-color: transparent;
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    color: var(--fl-text, #1f2937);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 0;
    float: none;
}

.cn-change-modal .cn-change-header .cn-form-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    margin-right: 8px;
    background: var(--fl-primary);
    border-radius: 2px;
}

.cn-change-modal .cn-change-close {
    background: transparent;
    border: none;
    color: var(--fl-text-light, #9ca3af);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s ease;
}

.cn-change-modal .cn-change-close:hover {
    color: var(--fl-text, #4b5563);
}

.cn-change-modal .cn-change-body {
    padding: 16px 20px 20px;
}

/* 步骤指示器 */
.cn-change-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--fl-bg-subtle, #f8fafc);
    border: 1px solid var(--fl-border, #eef2f7);
    border-radius: 10px;
}

.cn-change-step-dot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fl-text-muted, #94a3b8);
    transition: color 0.2s ease;
}

.cn-change-step-dot .cn-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fl-border-strong, #e2e8f0);
    color: var(--fl-text-muted, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.cn-change-step-dot.cn-active {
    color: var(--fl-primary);
    font-weight: 600;
}

.cn-change-step-dot.cn-active .cn-step-num {
    background: var(--fl-primary);
    color: #fff;
}

.cn-change-step-dot.cn-done {
    color: var(--fl-success, #28a745);
}

.cn-change-step-dot.cn-done .cn-step-num {
    background: var(--fl-success, #28a745);
    color: #fff;
}

.cn-change-step-line {
    width: 40px;
    height: 2px;
    background: var(--fl-border, #e9ecef);
    margin: 0 12px;
}

/* 只读原始网站地址卡片 */
.cn-change-original {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--fl-bg-subtle, #f0f7ff);
    border: 1px solid var(--fl-border, #dbeafe);
    border-radius: var(--fl-radius);
}

.cn-change-original .cn-original-label {
    font-size: 13px;
    color: var(--fl-text-muted, #64748b);
    font-weight: 600;
    white-space: nowrap;
}

.cn-change-original .cn-original-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fl-text, #333);
    word-break: break-all;
    text-align: right;
}

.cn-change-original .cn-original-value i {
    color: var(--fl-primary);
}

.cn-change-modal .cn-change-body .cn-form-description {
    margin: 0 0 12px;
    color: var(--fl-text-muted, #666);
    font-size: 13px;
    line-height: 1.5;
}

.cn-change-modal .cn-apply-form {
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

#cn-change-form hr {
    border: none;
    border-top: 1px solid var(--fl-border-strong, #e2e8f0);
    margin: 14px 0;
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
    .cn-apply-form-wrapper {
        padding: 0;
    }

    .cn-apply-header {
        padding: 12px 15px;
        margin-bottom: 12px;
        /* 手机端：标题与「更换友链」按钮同行（按钮与标题间隔约三个汉字），描述换行到下一行 */
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 0;
        text-align: left;
    }

    .cn-apply-header .cn-form-title {
        order: 1;
        font-size: 16px;
    }

    .cn-apply-header .cn-change-trigger {
        order: 2;
        align-self: center;
        margin-left: 48px; /* 与「申请友链」四字间隔约三个汉字（16px × 3） */
        margin-top: 0;
    }

    .cn-apply-header .cn-form-description {
        order: 3;
        flex-basis: 100%;
        font-size: 12px;
    }

    .cn-apply-form {
        padding: 15px;
    }

    .cn-apply-form .cn-form-row {
        flex-direction: column;
        gap: 0;
    }

    .cn-apply-form .cn-form-row .cn-form-group {
        min-width: 100%;
    }

    .cn-apply-form .cn-form-actions {
        flex-direction: column;
        gap: 10px;
    }

    .cn-apply-form .cn-submit-group .button {
        width: 100%;
        padding: 12px 20px;
    }
    /* 移动端：输入框旁的操作按钮不撑满、不换行、不挤占输入框 */
    .cn-apply-form .cn-input-group .button,
    .cn-apply-form .cn-email-code-row .button {
        width: auto;
        flex: 0 0 auto;
    }

    .cn-apply-form .cn-form-message {
        padding: 18px 24px;
        font-size: 15px;
    }

    .cn-notice-modal .cn-notice-content {
        width: 85%;
        border-radius: var(--fl-radius-lg);
    }

    .cn-notice-modal .cn-notice-header {
        padding: 20px 20px 10px;
    }

    .cn-notice-modal .cn-notice-icon {
        font-size: 36px;
    }

    .cn-notice-modal .cn-notice-header .cn-notice-title {
        font-size: 18px;
    }

    .cn-notice-modal .cn-notice-body {
        padding: 20px;
    }

    .cn-notice-modal .cn-notice-body p {
        font-size: 15px;
    }

    .cn-notice-modal .cn-notice-footer {
        padding: 0 20px 20px;
    }

    .cn-notice-modal .cn-notice-close-btn {
        padding: 10px 30px;
        font-size: 15px;
    }

    .cn-apply-form .button-secondary {
        padding: 10px 16px;
        font-size: 13px;
    }

    .cn-apply-form .cn-input-group,
    .cn-apply-form .cn-email-code-row {
        flex-wrap: nowrap;
    }

    .cn-apply-form .cn-input-group input,
    .cn-apply-form .cn-email-code-row input {
        min-width: 0;
    }

    .cn-change-modal .cn-change-content {
        width: 94%;
        max-height: 90vh;
    }

    .cn-change-modal .cn-change-header {
        padding: 14px 16px;
    }

    .cn-change-modal .cn-change-body {
        padding: 14px 16px 16px;
    }
}

.cn-list-wrapper {
    margin: 10px 0;
    padding: 10px;
    background: var(--fl-bg-card, #fff);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow, 0 2px 10px rgba(0,0,0,0.08));
    border: 1px solid var(--fl-border, #e9ecef);
}

.cn-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px 0;
    padding: 8px 10px;
    background: var(--fl-bg-card, #fff);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow, 0 2px 10px rgba(0,0,0,0.08));
    border: 1px solid var(--fl-border, #e9ecef);
    color: var(--fl-text, #333);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}
.cn-list-title-actions {
    font-weight: 500;
}
.cn-list-apply-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff !important;
    background: var(--fl-primary);
    border: none;
    border-radius: var(--fl-radius-sm);
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}
.cn-list-apply-btn:hover {
    background: var(--fl-primary-dark);
    transform: translateY(-1px);
}

.cn-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--fl-bg-subtle, #f8f9fa);
    border: 2px solid var(--fl-border, #e9ecef);
    border-radius: var(--fl-radius-sm);
    text-decoration: none;
    color: var(--fl-text, #333);
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
}

.cn-item:hover {
    background: var(--fl-bg-card, #fff);
    border-color: var(--fl-primary);
    box-shadow: 0 4px 12px var(--fl-primary-soft);
    transform: translateY(-2px);
}

.cn-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

.cn-item-icon-default {
    font-size: 18px;
}

.cn-item-name {
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-item-backlink-status {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

.cn-item-backlink-status.cn-has-backlink {
    background: var(--fl-success, #28a745);
}

.cn-item-backlink-status.cn-no-backlink {
    background: var(--fl-danger, #dc3545);
}

/* 图片卡片式样式 */
/* 指定列数时（短代码 columns="3"）按固定列排布，否则自适应填充 */
.cn-card-list[style*="--cn-cols"] {
    grid-template-columns: repeat(var(--cn-cols, 3), minmax(0, 1fr));
}

.cn-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    /* 防御：卡片不被拉伸/被主题 aspect-ratio 改成超高卡片 */
    align-items: start;
}
/* 防御：隐藏 .cn-card-list 内非卡片的残留节点（部分主题/插件会注入幽灵元素，
   表现为卡片网格中交替出现的空白格） */
.cn-card-list > *:not(.cn-card-item) {
    display: none !important;
}

.cn-card-item {
    display: flex;
    align-items: center;
    padding: 12px;
    /* 基础层 .cn-card 已提供背景/边框/圆角/阴影，此处仅保留差异项（flex 布局与紧凑内边距） */
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    min-height: 70px;
    aspect-ratio: auto;
}

.cn-card-item:hover {
    border-color: var(--fl-primary);
    box-shadow: 0 8px 24px var(--fl-primary-soft);
    transform: translateY(-3px);
}

.cn-card-icon-wrapper {
    position: relative;
    flex-shrink: 0;
    margin-right: 14px;
}

.cn-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--fl-border, #f0f0f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 初始占位背景：深浅色自适应的中性灰，真实图标加载成功后覆盖此背景 */
    background: var(--fl-neutral-bg, #e2e8f0);
}

.cn-card-icon-default {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fl-primary);
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    border: 3px solid var(--fl-border, #f0f0f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cn-card-status-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.cn-card-status-dot.cn-has-backlink {
    background: var(--fl-success, #28a745);
}

.cn-card-status-dot.cn-no-backlink {
    background: var(--fl-danger, #dc3545);
}

/* 待检测（缓存未命中、后台尚未完成）：中性灰，区别于正常绿/异常红 */
.cn-card-status-dot.cn-pending {
    background: var(--fl-neutral-text, #adb5bd);
}

.cn-card-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.cn-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--fl-text, #333);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-card-desc {
    font-size: 13px;
    color: var(--fl-text-muted, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.cn-card-meta {
    position: absolute;
    top: 8px;
    right: 10px;
}

.cn-response-time {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.cn-response-time.cn-fast {
    background: var(--fl-bg-success, #d4edda);
    color: var(--fl-text-success, #155724);
}

.cn-response-time.cn-medium {
    background: var(--fl-bg-warning, #fff3cd);
    color: var(--fl-text-warning, #856404);
}

.cn-response-time.cn-slow {
    background: var(--fl-bg-danger, #f8d7da);
    color: var(--fl-text-danger, #721c24);
}

/* 表格式样式 */
.cn-table-wrapper {
    overflow-x: auto;
}

.cn-links-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cn-links-table th {
    background: var(--fl-bg-subtle, #f8f9fa);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--fl-text, #333);
    border-bottom: 2px solid var(--fl-border, #e9ecef);
}

.cn-links-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--fl-border, #e9ecef);
    vertical-align: middle;
}

.cn-links-table tbody tr:hover {
    background: var(--fl-bg-subtle, #f8f9fa);
}

.cn-table-link {
    color: var(--fl-primary);
    text-decoration: none;
    font-weight: 500;
}

.cn-table-link:hover {
    text-decoration: underline;
}

.cn-table-url {
    font-size: 12px;
    color: var(--fl-text-muted, #666);
    max-width: 200px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--fl-radius-lg);
    font-size: 12px;
    font-weight: 500;
}

.cn-status-badge.cn-status-ok {
    background: var(--fl-bg-success, #d4edda);
    color: var(--fl-text-success, #155724);
}

.cn-status-badge.cn-status-warning {
    background: var(--fl-bg-warning, #fff3cd);
    color: var(--fl-text-warning, #856404);
}

.cn-status-badge.cn-status-error {
    background: var(--fl-bg-danger, #f8d7da);
    color: var(--fl-text-danger, #721c24);
}

.cn-status-badge.cn-status-unknown {
    background: var(--fl-bg-subtle, #e9ecef);
    color: var(--fl-text-muted, #6c757d);
}

.cn-backlink-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--fl-radius-lg);
    font-size: 12px;
    font-weight: 500;
}

.cn-backlink-badge.cn-has-backlink {
    background: var(--fl-bg-success, #d4edda);
    color: var(--fl-text-success, #155724);
}

.cn-backlink-badge.cn-no-backlink {
    background: var(--fl-bg-danger, #f8d7da);
    color: var(--fl-text-danger, #721c24);
}

/* 待检测：中性灰，区别于正常绿/异常红 */
.cn-backlink-badge.cn-pending {
    background: var(--fl-bg-subtle, #e9ecef);
    color: var(--fl-text-muted, #6c757d);
}

.cn-response-time.cn-pending {
    background: var(--fl-bg-subtle, #e9ecef);
    color: var(--fl-text-muted, #6c757d);
}

.cn-links-table .cn-show-mobile {
    display: none;
}

.cn-stats-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 8px 10px;
    background: var(--fl-bg-subtle, #f8f9fa);
    border-radius: var(--fl-radius);
    border: 1px solid var(--fl-border, #e9ecef);
    gap: 8px;
}

.cn-stats-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
}

.cn-stats-info .cn-stats-item {
    color: var(--fl-text-muted, #666);
}

.cn-stats-info .cn-stats-item strong {
    color: var(--fl-text, #333);
}

.cn-stats-info .cn-stats-normal strong {
    color: var(--fl-success, #28a745);
}

.cn-stats-info .cn-stats-abnormal strong {
    color: var(--fl-danger, #dc3545);
}

.cn-stats-info .cn-stats-no-backlink strong {
    color: var(--fl-warning, #fd7e14);
}

.cn-filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cn-filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--fl-border-strong, #dee2e6);
    background: var(--fl-bg-card, #fff);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--fl-neutral-text, #495057);
}

.cn-filter-btn:hover {
    background: var(--fl-border, #e9ecef);
}

.cn-filter-btn.cn-active {
    background: var(--fl-primary);
    color: #fff;
    border-color: var(--fl-primary);
}

/* 筛选隐藏：通用规则，卡片式（.cn-card-item）与表格式（tr）均适用 */
.cn-row-hidden {
    display: none !important;
}

/* 表格移动端响应式 - 保持单一表格，横向滚动 */
@media screen and (max-width: 768px) {
    .cn-list-wrapper {
        padding: 15px;
        margin-top: 20px;
    }

    .cn-list-title {
        font-size: 16px;
        margin-bottom: 15px;
        padding: 12px;
    }

    .cn-card-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cn-card-item {
        padding: 10px;
        min-height: auto;
        flex-direction: row;
        align-items: flex-start;
    }

    .cn-card-icon-wrapper {
        margin-right: 10px;
        margin-bottom: 0;
    }

    .cn-card-icon,
    .cn-card-icon-default {
        width: 40px;
        height: 40px;
    }

    .cn-card-icon-default {
        font-size: 18px;
    }

    .cn-card-content {
        flex: 1;
        min-width: 0;
    }

    .cn-card-name {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .cn-card-desc {
        font-size: 11px;
        display: block;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
        max-height: 2.8em;
    }

    .cn-card-meta {
        position: absolute;
        top: 8px;
        right: 10px;
    }

    .cn-response-time {
        font-size: 10px;
        padding: 2px 6px;
    }

    .cn-table-wrapper {
        width: 100%;
        overflow-x: hidden;
    }

    .cn-links-table {
        width: 100%;
        min-width: auto;
        font-size: 12px;
        table-layout: fixed;
    }

    .cn-links-table th,
    .cn-links-table td {
        padding: 8px 6px;
    }

    .cn-links-table .cn-hide-mobile {
        display: none;
    }

    .cn-links-table .cn-show-mobile {
        display: table-cell;
    }

    .cn-stats-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cn-stats-info {
        gap: 10px;
        font-size: 12px;
    }

    .cn-filter-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .cn-filter-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .cn-status-badge,
    .cn-backlink-badge {
        font-size: 11px;
        padding: 3px 6px;
    }
}

/* 内联 SVG 图标（替代 Font Awesome）
   fill:none 必须显式写在 CSS 里：内置图标全部是「描边」图标（assets/image/*.svg 均为
   fill="none" stroke="currentColor"），但那是 **呈现属性**，优先级低于任何 CSS 规则。
   部分主题（如 zibll）带全局 `svg { fill: currentColor }`，会把描边图标的内部区域
   一并填充，勾/叉等图形因此变成实心色块。此规则特异性高于元素选择器，可稳定纠正。 */
.cn-icon{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;flex:none;fill:none;}

/* ============================================================
   主题隔离强化：表单控件与「更换友链」按钮抵抗主题全局样式覆盖
   （高优先级 + !important + CSS 变量，确保任意主题/深浅下视觉一致）
   ============================================================ */
.cn-apply-form-wrapper .cn-apply-form input[type="text"],
.cn-apply-form-wrapper .cn-apply-form input[type="url"],
.cn-apply-form-wrapper .cn-apply-form input[type="email"],
.cn-apply-form-wrapper .cn-apply-form select,
.cn-apply-form-wrapper .cn-apply-form textarea,
.cn-change-modal .cn-apply-form input[type="text"],
.cn-change-modal .cn-apply-form input[type="url"],
.cn-change-modal .cn-apply-form input[type="email"],
.cn-change-modal .cn-apply-form select,
.cn-change-modal .cn-apply-form textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid var(--fl-border, #e9ecef) !important;
    border-radius: 6px !important;
    background: var(--fl-bg-card, #fff) !important;
    color: var(--fl-text, #333) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.cn-apply-form-wrapper .cn-apply-form select,
.cn-change-modal .cn-apply-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 34px !important;
    background-color: var(--fl-bg-card, #fff) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    cursor: pointer !important;
}
/* 更换友链按钮：独立紧凑样式，不被主题全局 button 规则破坏 */
.cn-change-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    /* 跟随主题强调色（--fl-primary 由表单包装器内联样式输出），回退默认蓝 */
    background: var(--fl-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px var(--fl-primary-soft) !important;
}
.cn-change-trigger:hover { background: var(--fl-primary-dark) !important; color: #fff !important; }
.cn-change-trigger:focus { outline: none !important; box-shadow: 0 0 0 3px var(--fl-primary-soft) !important; }
.cn-change-trigger svg,
.cn-change-trigger .cn-icon {
    background: none !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; display: inline-block !important; vertical-align: middle !important;
}

/* ============================================================
 * 深色模式兜底：覆盖尚未替换为 CSS 变量的硬编码
 *
 * 触发方式（三种自动覆盖，双重保障）：
 *   1) @media (prefers-color-scheme: dark) —— 用户操作系统深色 + 浏览器支持
 *   2) html.cn-is-dark / body.cn-is-dark —— JS 检测到主题深色，主动加类
 *   3) html.dark / html.dark-mode / html.is-dark —— 主题自己的深色类
 *
 * 覆盖范围：wrapper 级的 background / color / border 硬编码。
 * 按钮的白色文字 (color: #fff) 保留不动（深色背景下白色按钮字是正确的）。
 * ============================================================ */

/* 统一选择器：所有可能的深色声明方式 + 所有可能的插件 wrapper
 * 与文件顶部变量覆盖块（html.cn-is-dark, html[data-bs-theme] 等）保持完全一致 */
:is(
    html.cn-is-dark, body.cn-is-dark,
    html.dark, html.dark-mode, html.is-dark, html.theme-dark, html.dark-theme, html.night-theme,
    html.skin-dark, html.force-dark, html.dim, html.fl-dark,
    html[data-bs-theme="dark"], html[data-code-theme="dark"],
    body.dark, body.dark-mode, body.is-dark, body.theme-dark, body.dark-theme, body.night-theme,
    body.skin-dark, body.night, body.dim, body.puock-dark, body.puock-dark-mode
) .cn-apply-form-wrapper,
:is(
    html.cn-is-dark, body.cn-is-dark,
    html.dark, html.dark-mode, html.is-dark, html.theme-dark, html.dark-theme, html.night-theme,
    html.skin-dark, html.force-dark, html.dim, html.fl-dark,
    html[data-bs-theme="dark"], html[data-code-theme="dark"],
    body.dark, body.dark-mode, body.is-dark, body.theme-dark, body.dark-theme, body.night-theme,
    body.skin-dark, body.night, body.dim, body.puock-dark, body.puock-dark-mode
) .cn-list-wrapper,
:is(
    html.cn-is-dark, body.cn-is-dark,
    html.dark, html.dark-mode, html.is-dark, html.theme-dark, html.dark-theme, html.night-theme,
    html.skin-dark, html.force-dark, html.dim, html.fl-dark,
    html[data-bs-theme="dark"], html[data-code-theme="dark"],
    body.dark, body.dark-mode, body.is-dark, body.theme-dark, body.dark-theme, body.night-theme,
    body.skin-dark, body.night, body.dim, body.puock-dark, body.puock-dark-mode
) .cn-page-wrapper,
@media (prefers-color-scheme: dark) {
    .cn-apply-form-wrapper, .cn-list-wrapper, .cn-page-wrapper {
        --fl-dark: 1;
    }
}

/* ---- background: #fff → 深色卡片背景 ---- */
.cn-apply-form-wrapper:has([style*="--fl-dark: 1"]) .cn-apply-header,
.cn-list-wrapper:has([style*="--fl-dark: 1"]) .cn-list-title,
.cn-list-wrapper:has([style*="--fl-dark: 1"]) .cn-stats-bar {
    background: var(--fl-bg-card, #1f2937) !important;
    border-color: var(--fl-border, #374151) !important;
    box-shadow: var(--fl-shadow, 0 2px 10px rgba(0,0,0,0.4)) !important;
}

/* 上面用 :has() 在某些旧浏览器（Safari < 15.4）不支持，再用主题类选择器做一遍覆盖
 * 选择器与文件顶部变量覆盖块保持一致（html.cn-is-dark 为 JS 统一入口）*/
html.cn-is-dark .cn-apply-form-wrapper .cn-apply-header,
html.dark .cn-apply-form-wrapper .cn-apply-header,
html.dark-mode .cn-apply-form-wrapper .cn-apply-header,
html.is-dark .cn-apply-form-wrapper .cn-apply-header,
html.dark-theme .cn-apply-form-wrapper .cn-apply-header,
html.night-theme .cn-apply-form-wrapper .cn-apply-header,
html[data-bs-theme="dark"] .cn-apply-form-wrapper .cn-apply-header,
html[data-code-theme="dark"] .cn-apply-form-wrapper .cn-apply-header,
body.cn-is-dark .cn-apply-form-wrapper .cn-apply-header {
    background: var(--fl-bg-card, #1f2937) !important;
    border-color: var(--fl-border, #374151) !important;
    box-shadow: var(--fl-shadow, 0 2px 10px rgba(0,0,0,0.4)) !important;
}

/* ---- 列表卡片背景 ---- */
html.cn-is-dark .cn-list-wrapper .cn-card-item,
html.dark .cn-list-wrapper .cn-card-item,
html.dark-mode .cn-list-wrapper .cn-card-item,
html.is-dark .cn-list-wrapper .cn-card-item,
html.dark-theme .cn-list-wrapper .cn-card-item,
html.night-theme .cn-list-wrapper .cn-card-item,
html[data-bs-theme="dark"] .cn-list-wrapper .cn-card-item,
html[data-code-theme="dark"] .cn-list-wrapper .cn-card-item,
body.cn-is-dark .cn-list-wrapper .cn-card-item {
    background: var(--fl-bg-card, #1f2937) !important;
    border-color: var(--fl-border, #374151) !important;
    box-shadow: var(--fl-shadow-sm, 0 1px 4px rgba(0,0,0,0.35)) !important;
}

/* ---- 列表/表单中通用白色背景 → 深色 ---- */
html.cn-is-dark .cn-list-wrapper [style*="background: #fff"],
html.dark .cn-list-wrapper [style*="background: #fff"],
html[data-bs-theme="dark"] .cn-list-wrapper [style*="background: #fff"],
html.cn-is-dark .cn-apply-form-wrapper [style*="background: #fff"],
html.dark .cn-apply-form-wrapper [style*="background: #fff"],
html[data-bs-theme="dark"] .cn-apply-form-wrapper [style*="background: #fff"] {
    background: var(--fl-bg-card, #1f2937) !important;
}

/* ---- 表单输入框深色 ---- */
html.cn-is-dark .cn-apply-form-wrapper input[type="text"],
html.cn-is-dark .cn-apply-form-wrapper input[type="url"],
html.cn-is-dark .cn-apply-form-wrapper input[type="email"],
html.cn-is-dark .cn-apply-form-wrapper textarea,
html.cn-is-dark .cn-apply-form-wrapper select,
html.dark .cn-apply-form-wrapper input[type="text"],
html.dark .cn-apply-form-wrapper input[type="url"],
html.dark .cn-apply-form-wrapper input[type="email"],
html.dark .cn-apply-form-wrapper textarea,
html.dark .cn-apply-form-wrapper select,
html[data-bs-theme="dark"] .cn-apply-form-wrapper input[type="text"],
html[data-bs-theme="dark"] .cn-apply-form-wrapper input[type="url"],
html[data-bs-theme="dark"] .cn-apply-form-wrapper input[type="email"],
html[data-bs-theme="dark"] .cn-apply-form-wrapper textarea,
html[data-bs-theme="dark"] .cn-apply-form-wrapper select {
    background: var(--fl-bg-light, #111827) !important;
    color: var(--fl-text, #e5e7eb) !important;
    border-color: var(--fl-border, #374151) !important;
}

/* ---- 表单输入框 placeholder ---- */
html.cn-is-dark .cn-apply-form-wrapper input::placeholder,
html.cn-is-dark .cn-apply-form-wrapper textarea::placeholder,
html.dark .cn-apply-form-wrapper input::placeholder,
html.dark .cn-apply-form-wrapper textarea::placeholder,
html[data-bs-theme="dark"] .cn-apply-form-wrapper input::placeholder,
html[data-bs-theme="dark"] .cn-apply-form-wrapper textarea::placeholder {
    color: var(--fl-text-muted, #6b7280) !important;
    opacity: 0.7;
}

/* ---- 表单卡片/警告提示深色 ---- */
html.cn-is-dark .cn-apply-form-wrapper .cn-apply-card,
html.dark .cn-apply-form-wrapper .cn-apply-card,
html[data-bs-theme="dark"] .cn-apply-form-wrapper .cn-apply-card {
    background: var(--fl-bg-card, #1f2937) !important;
    border-color: var(--fl-border, #374151) !important;
}

/* ---- 表单分组/分隔区深色 ---- */
html.cn-is-dark .cn-apply-form-wrapper .cn-form-group,
html.cn-is-dark .cn-change-modal .cn-form-group,
html.dark .cn-apply-form-wrapper .cn-form-group,
html.dark .cn-change-modal .cn-form-group,
html[data-bs-theme="dark"] .cn-apply-form-wrapper .cn-form-group,
html[data-bs-theme="dark"] .cn-change-modal .cn-form-group {
    background: var(--fl-bg-subtle, #111827) !important;
    border-color: var(--fl-border, #374151) !important;
}

/* ---- 通用文字颜色覆盖（浅文字 → 深色下变亮） ---- */
html.cn-is-dark .cn-apply-form-wrapper,
html.cn-is-dark .cn-list-wrapper,
html.cn-is-dark .cn-change-modal,
html.dark .cn-apply-form-wrapper,
html.dark .cn-list-wrapper,
html.dark .cn-change-modal,
html[data-bs-theme="dark"] .cn-apply-form-wrapper,
html[data-bs-theme="dark"] .cn-list-wrapper,
html[data-bs-theme="dark"] .cn-change-modal {
    color: var(--fl-text, #e5e7eb);
}
/* 表单 label（不是 .cn-form-label 那种不存在的 class！）*/
html.cn-is-dark .cn-apply-form-wrapper .cn-apply-form label,
html.cn-is-dark .cn-change-modal .cn-apply-form label,
html.cn-is-dark .cn-list-wrapper .cn-card-name,
html.dark .cn-apply-form-wrapper .cn-apply-form label,
html.dark .cn-change-modal .cn-apply-form label,
html.dark .cn-list-wrapper .cn-card-name,
html[data-bs-theme="dark"] .cn-apply-form-wrapper .cn-apply-form label,
html[data-bs-theme="dark"] .cn-change-modal .cn-apply-form label,
html[data-bs-theme="dark"] .cn-list-wrapper .cn-card-name {
    color: var(--fl-text, #e5e7eb) !important;
}
/* 说明文字 .cn-description / .cn-form-description（不是 .cn-form-help）*/
html.cn-is-dark .cn-apply-form-wrapper .cn-description,
html.cn-is-dark .cn-change-modal .cn-form-description,
html.cn-is-dark .cn-list-wrapper .cn-card-desc,
html.dark .cn-apply-form-wrapper .cn-description,
html.dark .cn-change-modal .cn-form-description,
html.dark .cn-list-wrapper .cn-card-desc,
html[data-bs-theme="dark"] .cn-apply-form-wrapper .cn-description,
html[data-bs-theme="dark"] .cn-change-modal .cn-form-description,
html[data-bs-theme="dark"] .cn-list-wrapper .cn-card-desc {
    color: var(--fl-text-muted, #9ca3af) !important;
}

/* ---- 通用边框颜色覆盖 ---- */
html.cn-is-dark .cn-apply-form-wrapper [class*="border"],
html.cn-is-dark .cn-list-wrapper [class*="border"],
html.cn-is-dark .cn-change-modal [class*="border"],
html.dark .cn-apply-form-wrapper [class*="border"],
html.dark .cn-list-wrapper [class*="border"],
html.dark .cn-change-modal [class*="border"],
html[data-bs-theme="dark"] .cn-apply-form-wrapper [class*="border"],
html[data-bs-theme="dark"] .cn-list-wrapper [class*="border"],
html[data-bs-theme="dark"] .cn-change-modal [class*="border"] {
    border-color: var(--fl-border, #374151) !important;
}

/* ---- prefers-color-scheme: dark 媒体查询覆盖（不依赖主题 class） ---- */
@media (prefers-color-scheme: dark) {
    .cn-apply-form-wrapper, .cn-list-wrapper, .cn-page-wrapper, .cn-change-modal {
        color: var(--fl-text, #e5e7eb);
    }
    .cn-apply-form-wrapper .cn-apply-header,
    .cn-list-wrapper .cn-list-title,
    .cn-list-wrapper .cn-stats-bar {
        background: var(--fl-bg-card, #1f2937) !important;
        border-color: var(--fl-border, #374151) !important;
        box-shadow: var(--fl-shadow, 0 2px 10px rgba(0,0,0,0.4)) !important;
    }
    .cn-list-wrapper .cn-card-item {
        background: var(--fl-bg-card, #1f2937) !important;
        border-color: var(--fl-border, #374151) !important;
        box-shadow: var(--fl-shadow-sm, 0 1px 4px rgba(0,0,0,0.35)) !important;
    }
    /* 表单 label（不是 .cn-form-label 那种不存在的 class）*/
    .cn-apply-form-wrapper .cn-apply-form label,
    .cn-change-modal .cn-apply-form label,
    .cn-list-wrapper .cn-card-name {
        color: var(--fl-text, #e5e7eb) !important;
    }
    /* 说明文字 .cn-description / .cn-form-description（不是 .cn-form-help）*/
    .cn-apply-form-wrapper .cn-description,
    .cn-change-modal .cn-form-description,
    .cn-list-wrapper .cn-card-desc {
        color: var(--fl-text-muted, #9ca3af) !important;
    }
    .cn-apply-form-wrapper input[type="text"],
    .cn-apply-form-wrapper input[type="url"],
    .cn-apply-form-wrapper input[type="email"],
    .cn-apply-form-wrapper textarea,
    .cn-apply-form-wrapper select,
    .cn-change-modal input[type="text"],
    .cn-change-modal input[type="url"],
    .cn-change-modal input[type="email"],
    .cn-change-modal textarea,
    .cn-change-modal select {
        background: var(--fl-bg-light, #111827) !important;
        color: var(--fl-text, #e5e7eb) !important;
        border-color: var(--fl-border, #374151) !important;
    }
    .cn-apply-form-wrapper input::placeholder,
    .cn-apply-form-wrapper textarea::placeholder,
    .cn-change-modal input::placeholder,
    .cn-change-modal textarea::placeholder {
        color: var(--fl-text-muted, #6b7280) !important;
        opacity: 0.7;
    }
    /* ---- 状态徽章：warning / error / success 覆盖 ---- */
    .cn-list-wrapper .cn-status-badge.cn-status-warning,
    .cn-apply-form-wrapper .cn-status-badge.cn-status-warning,
    .cn-page-wrapper .cn-status-badge.cn-status-warning {
        background: #5c4a1e !important;
        color: #fbbf24 !important;
        border-color: #92400e !important;
    }
    .cn-list-wrapper .cn-status-badge.cn-status-error,
    .cn-apply-form-wrapper .cn-status-badge.cn-status-error,
    .cn-page-wrapper .cn-status-badge.cn-status-error {
        background: #5c1f24 !important;
        color: #fca5a5 !important;
        border-color: #991b1b !important;
    }
    .cn-list-wrapper .cn-status-badge.cn-status-success,
    .cn-apply-form-wrapper .cn-status-badge.cn-status-success,
    .cn-page-wrapper .cn-status-badge.cn-status-success {
        background: #1e4a2a !important;
        color: #86efac !important;
        border-color: #14532d !important;
    }
}