/* ============================================================
   CN 前台基础层（frontend-base.css）
   - 设计令牌（Design Tokens）：单一事实来源，作用域限定到插件各前台根容器，
     不写全局 :root，避免污染整站 / 与其它插件或主题变量冲突。
   - 共享可复用组件：.cn-btn / .cn-input / .cn-badge / .cn-pill / .cn-card
   - 强调色由 class-frontend-assets.php::inject_frontend_tokens() 按后台「主题强调色」
     统一覆盖此处默认值，全站前台（表单 / 列表 / coolnew）一处控制、动态变化。
   视觉语言：统一圆角 / 阴影 / 间距 / 字号，现代简洁（卡片化、轻阴影、留白充足）。
   ============================================================ */

.cn-apply-form-wrapper,
.cn-list-wrapper,
.cn-page-wrapper,
.cn-apply-page-wrap,
.cn-coolnew-page,
/* 提示框 / 图形验证码弹窗由 JS 直接 appendTo('body')，不在上面任何根容器内，
   必须在此单独列出，否则取不到全部 --fl-* 令牌（表现为按钮背景透明+白字不可见、
   圆角退化等）。它们仍是插件自己的元素，不会污染整站。 */
.cn-notice-modal,
.cn-captcha-modal {
    /* —— 主题强调色（别名指向同一值，桥接历史三套命名） —— */
    --fl-primary: #ff3f9f;
    --fl-primary-dark: #d13482;
    --fl-primary-soft: rgba(255, 63, 159, 0.15);
    --cn-accent: #ff3f9f;
    --cn-accent-dark: #d13482;
    --cn-accent-soft: rgba(255, 63, 159, 0.15);
    --cn-accent-rgb: 255, 63, 159;
    --theme-color: #ff3f9f;

    /* —— 状态语义色 —— */
    --fl-success: #22a06b;
    --fl-danger: #e23d3d;
    --fl-warning: #f59e0b;
    --fl-info: #2e90d6;
    --fl-bg-success: #e7f6ee; --fl-text-success: #1c7a4d; --fl-border-success: #bfe6cf;
    --fl-bg-danger:  #fdeaea; --fl-text-danger:  #b22b2b; --fl-border-danger:  #f6c9c9;
    --fl-bg-warning: #fef3e2; --fl-text-warning: #9a6400; --fl-border-warning: #f6dca6;

    /* —— 中性灰 —— */
    --fl-neutral-bg: #f4f6f9;
    --fl-neutral-bg-hover: #e8ecf1;
    --fl-neutral-text: #475569;

    /* —— 文字（三级层级） —— */
    --fl-text: #2b3440;
    --fl-text-light: #5b6470;
    --fl-text-muted: #8a93a0;

    /* —— 背景（多级层级） —— */
    --fl-bg: #ffffff;
    --fl-bg-light: #f7f9fc;
    --fl-bg-card: #ffffff;
    --fl-bg-subtle: #f7f9fc;

    /* —— 边框（两级） —— */
    --fl-border: #e8ebf0;
    --fl-border-strong: #d7dce3;

    /* —— 圆角（统一标尺） —— */
    --fl-radius: 10px;
    --fl-radius-sm: 7px;
    --fl-radius-lg: 14px;
    --fl-radius-pill: 999px;

    /* —— 阴影（统一标尺） —— */
    --fl-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
    --fl-shadow-sm: 0 1px 4px rgba(17, 24, 39, 0.08);
    --fl-shadow-lg: 0 10px 28px var(--fl-primary-soft);
    --fl-shadow-focus: 0 0 0 3px var(--fl-primary-soft);

    /* —— 间距标尺 —— */
    --fl-gap: 12px;
    --fl-gap-sm: 8px;
    --fl-gap-lg: 16px;
    --fl-pad: 14px;

    /* —— 字号 / 字重 / 字体 —— */
    --fl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
                "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --fl-fs-xs: 12px;
    --fl-fs-sm: 13px;
    --fl-fs-base: 14px;
    --fl-fs-md: 15px;
    --fl-fs-lg: 16px;
    --fl-fs-xl: 18px;
    --fl-fw-med: 500;
    --fl-fw-semibold: 600;
    --fl-fw-bold: 700;

    --fl-transition: all 0.22s ease;
}

/* ============================================================
   共享按钮组件 .cn-btn（可复用：表单 / 列表 / 弹窗 / 更换友链）
   各功能模块只需 <button class="cn-btn cn-btn--primary"> 即可，
   颜色全程由强调色变量驱动，随主题配置动态变化。
   ============================================================ */
.cn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fl-font);
    font-size: var(--fl-fs-base);
    font-weight: var(--fl-fw-semibold);
    line-height: 1.5;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--fl-radius);
    background: var(--fl-neutral-bg);
    color: var(--fl-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--fl-shadow-sm);
    transition: var(--fl-transition);
    user-select: none;
}
.cn-btn:hover { background: var(--fl-neutral-bg-hover); color: var(--fl-text); }
.cn-btn:focus-visible { outline: none; box-shadow: var(--fl-shadow-focus); }
.cn-btn:disabled,
.cn-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.cn-btn--primary {
    background: var(--fl-primary);
    color: #fff;
    border-color: var(--fl-primary);
    box-shadow: 0 4px 14px var(--fl-primary-soft);
}
.cn-btn--primary:hover {
    background: var(--fl-primary-dark);
    border-color: var(--fl-primary-dark);
    color: #fff;
    box-shadow: 0 6px 20px var(--fl-primary-soft);
    transform: translateY(-1px);
}
.cn-btn--secondary {
    /* 次要按钮：中性底 + 强调色文字/描边，跟随后台「主题强调色」 */
    background: var(--fl-bg);
    color: var(--fl-primary);
    border-color: var(--fl-primary-soft);
    box-shadow: var(--fl-shadow-sm);
}
.cn-btn--secondary:hover {
    background: var(--fl-primary-soft);
    border-color: var(--fl-primary);
    color: var(--fl-primary-dark);
}
.cn-btn--ghost {
    background: transparent;
    color: var(--fl-primary);
    border-color: transparent;
    box-shadow: none;
}
.cn-btn--ghost:hover { background: var(--fl-primary-soft); color: var(--fl-primary-dark); }
.cn-btn--sm { padding: 5px 13px; font-size: var(--fl-fs-sm); border-radius: var(--fl-radius-sm); gap: 5px; }
.cn-btn--lg { padding: 12px 28px; font-size: var(--fl-fs-md); }

/* ============================================================
   共享表单控件 .cn-input（可复用：文本 / 地址 / 邮箱 / 多行 / 下拉）
   聚焦态使用强调色环，统一交互反馈。
   ============================================================ */
.cn-input {
    width: 100%;
    font-family: var(--fl-font);
    font-size: var(--fl-fs-base);
    color: var(--fl-text);
    background: var(--fl-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    padding: 10px 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.cn-input::placeholder { color: var(--fl-text-muted); }
.cn-input:focus {
    outline: none;
    border-color: var(--fl-primary);
    box-shadow: var(--fl-shadow-focus);
}

/* ============================================================
   共享徽章 / 标签 .cn-badge（可复用：状态、分类、提示）
   ============================================================ */
.cn-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fl-fs-xs);
    font-weight: var(--fl-fw-semibold);
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: var(--fl-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.cn-badge--success { background: var(--fl-bg-success); color: var(--fl-text-success); border-color: var(--fl-border-success); }
.cn-badge--danger  { background: var(--fl-bg-danger);  color: var(--fl-text-danger);  border-color: var(--fl-border-danger); }
.cn-badge--warning { background: var(--fl-bg-warning); color: var(--fl-text-warning); border-color: var(--fl-border-warning); }
.cn-badge--info    { background: color-mix(in srgb, var(--fl-info) 14%, #fff); color: var(--fl-info); }
.cn-badge--accent  { background: var(--fl-primary-soft); color: var(--fl-primary-dark); }
.cn-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fl-fs-xs);
    padding: 2px 9px;
    border-radius: var(--fl-radius-pill);
    background: var(--fl-neutral-bg);
    color: var(--fl-neutral-text);
}

/* ============================================================
   共享卡片 .cn-card（可复用：信息卡 / 统计卡 / 容器）
   ============================================================ */
.cn-card {
    background: var(--fl-bg-card);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-lg);
    box-shadow: var(--fl-shadow);
    padding: var(--fl-pad);
}