/* /css/ai_v2.css — AI 工具导航 v2（2026-10-22）
   2026-10-23：暗黑主题版 — 颜色全部抽成 CSS 变量（html 级作用域，弹窗在 .ai2 外也能继承），
   默认浅色值写在 html{}，html[data-ai-theme="dark"] 覆盖为暗黑。
   默认暗黑由页面 head 内联脚本设置 data-ai-theme（读 localStorage，键 ai2_theme），避免闪白。 */

html {
    /* 页面底色 / 正文 */
    --ai2-page-bg: #f4f6f9;
    --ai2-body-text: #333;
    --ai2-text: #1f2430;          /* 标题 / 卡片标题 */
    --ai2-text-sub: #6b7280;      /* 副标题 */
    --ai2-text-muted: #9ca3af;    /* 数量徽标 / 关闭按钮 / 空状态 */
    --ai2-text-remark: #8b93a3;   /* 卡片备注 */
    --ai2-text-label: #4b5563;    /* 按钮 / chip / 表单 label */
    --ai2-act-text: #6b7280;      /* 卡片管理操作 */
    --ai2-link-hover: #4f46e5;

    /* 面（卡片 / 输入框 / 弹窗） */
    --ai2-surface: #fff;
    --ai2-surface-2: #f1f3f9;     /* ghost 按钮 / 计数徽标 */
    --ai2-surface-2-hover: #e7ebf5;
    --ai2-icon-bg: #f3f5fb;       /* 卡片图标底 */

    /* 边框 */
    --ai2-border: #e8ecf4;        /* 卡片 */
    --ai2-border-input: #e3e7f0;  /* 输入框 / chip / ghost */
    --ai2-focus-border: #818cf8;
    --ai2-focus-ring: rgba(129,140,248,.15);

    /* 阴影 / 遮罩 */
    --ai2-card-hover-shadow: 0 8px 22px rgba(31,41,80,.10);
    --ai2-mask: rgba(15,23,42,.45);
    --ai2-modal-shadow: 0 20px 60px rgba(15,23,42,.25);

    /* 常用（热）卡片 */
    --ai2-hot-border: #fcd34d;
    --ai2-hot-bg: linear-gradient(180deg, #fffdf5, #fff);

    /* 语义色：成功 / 危险 / 警示（bg / text / border / hover-bg） */
    --ai2-ok-bg: #ecfdf5;      --ai2-ok-text: #047857;    --ai2-ok-border: #a7f3d0;
    --ai2-err-bg: #fef2f2;     --ai2-err-text: #b91c1c;   --ai2-err-border: #fecaca;
    --ai2-danger-bg: #fee2e2;  --ai2-danger-text: #b91c1c;
    --ai2-danger-border: #fecaca;  --ai2-danger-hover-bg: #fecaca;
    --ai2-warn-bg: #fef3c7;    --ai2-warn-text: #b45309;
    --ai2-warn-border: #fde68a;    --ai2-warn-hover-bg: #fde68a;
    --ai2-resume-bg: #ecfdf5;  --ai2-resume-text: #047857;
    --ai2-resume-border: #a7f3d0;  --ai2-resume-hover-bg: #d1fae5;
    --ai2-hot-chip-bg: #fef3c7;    --ai2-hot-chip-text: #b45309;
    --ai2-off-chip-bg: #fee2e2;    --ai2-off-chip-text: #b91c1c;

    /* 主题按钮 hover 底色（chip hover 文字色复用 --ai2-link-hover 的亮色变体） */
    --ai2-chip-hover-text: #4f46e5;
}

/* ---------- 暗黑主题（默认由 head 内联脚本设置） ---------- */
html[data-ai-theme="dark"] {
    color-scheme: dark;
    --ai2-page-bg: #0f172a;
    --ai2-body-text: #dbe2f0;
    --ai2-text: #e7ecf6;
    --ai2-text-sub: #9aa7bd;
    --ai2-text-muted: #7e8ba3;
    --ai2-text-remark: #8494ad;
    --ai2-text-label: #b6c2d9;
    --ai2-act-text: #9aa7bd;
    --ai2-link-hover: #818cf8;

    --ai2-surface: #182234;
    --ai2-surface-2: #1f2c44;
    --ai2-surface-2-hover: #263653;
    --ai2-icon-bg: #223050;

    --ai2-border: #2a3850;
    --ai2-border-input: #2e3d59;
    --ai2-focus-border: #818cf8;
    --ai2-focus-ring: rgba(99,102,241,.28);

    --ai2-card-hover-shadow: 0 8px 22px rgba(0,0,0,.45);
    --ai2-mask: rgba(2,6,16,.66);
    --ai2-modal-shadow: 0 20px 60px rgba(0,0,0,.55);

    --ai2-hot-border: rgba(252,211,77,.55);
    --ai2-hot-bg: linear-gradient(180deg, #2b2519, #182234);

    --ai2-ok-bg: rgba(16,185,129,.14);   --ai2-ok-text: #6ee7b7;    --ai2-ok-border: rgba(110,231,183,.35);
    --ai2-err-bg: rgba(239,68,68,.14);   --ai2-err-text: #fca5a5;   --ai2-err-border: rgba(252,165,165,.35);
    --ai2-danger-bg: rgba(239,68,68,.16);    --ai2-danger-text: #fca5a5;
    --ai2-danger-border: rgba(252,165,165,.3);  --ai2-danger-hover-bg: rgba(239,68,68,.28);
    --ai2-warn-bg: rgba(245,158,11,.16);     --ai2-warn-text: #fcd34d;
    --ai2-warn-border: rgba(252,211,77,.3);  --ai2-warn-hover-bg: rgba(245,158,11,.28);
    --ai2-resume-bg: rgba(16,185,129,.16);   --ai2-resume-text: #6ee7b7;
    --ai2-resume-border: rgba(110,231,183,.35);  --ai2-resume-hover-bg: rgba(16,185,129,.28);
    --ai2-hot-chip-bg: rgba(245,158,11,.2);  --ai2-hot-chip-text: #fcd34d;
    --ai2-off-chip-bg: rgba(239,68,68,.18);  --ai2-off-chip-text: #fca5a5;

    --ai2-chip-hover-text: #a5b4fc;
}

/* 覆盖 common_layout.css 的浅色 body（本文件在其后加载，可直接覆盖） */
html[data-ai-theme="dark"] body {
    background-color: var(--ai2-page-bg);
    color: var(--ai2-body-text);
}

.ai2 { max-width: 1280px; margin: 0 auto; padding: 18px 16px 60px; }

/* ---------- 头部 ---------- */
.ai2__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ai2__header h1 { margin: 0 0 6px; font-size: 26px; color: var(--ai2-text); }
.ai2__ver { font-size: 13px; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 10px; padding: 2px 8px; vertical-align: middle; }
.ai2__sub { margin: 0; color: var(--ai2-text-sub); font-size: 14px; }
.ai2__admin-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ai2__inline-form { display: inline; margin: 0; }

.ai2__btn { border: none; border-radius: 10px; padding: 9px 18px; font-size: 14px; cursor: pointer; transition: all .15s; }
.ai2__btn--primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.3); }
.ai2__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,.4); }
.ai2__btn--ghost { background: var(--ai2-surface-2); color: var(--ai2-text-label); border: 1px solid var(--ai2-border-input); }
.ai2__btn--ghost:hover { background: var(--ai2-surface-2-hover); }
.ai2__btn--link { display: inline-block; text-decoration: none; }
.ai2__btn--danger { background: var(--ai2-danger-bg); color: var(--ai2-danger-text); border: 1px solid var(--ai2-danger-border); }
.ai2__btn--danger:hover { background: var(--ai2-danger-hover-bg); }
.ai2__btn--toggle { background: var(--ai2-warn-bg); color: var(--ai2-warn-text); border: 1px solid var(--ai2-warn-border); }
.ai2__btn--toggle:hover { background: var(--ai2-warn-hover-bg); }
.ai2__btn--toggle.ai2__btn--resume { background: var(--ai2-resume-bg); color: var(--ai2-resume-text); border-color: var(--ai2-resume-border); }
.ai2__btn--toggle.ai2__btn--resume:hover { background: var(--ai2-resume-hover-bg); }

/* ---------- 提示条 ---------- */
.ai2__alert { border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.ai2__alert--ok { background: var(--ai2-ok-bg); color: var(--ai2-ok-text); border: 1px solid var(--ai2-ok-border); }
.ai2__alert--err { background: var(--ai2-err-bg); color: var(--ai2-err-text); border: 1px solid var(--ai2-err-border); }

/* ---------- 工具栏：搜索 + 分类 chip ---------- */
.ai2__toolbar { margin-bottom: 18px; }
.ai2__search { width: 100%; box-sizing: border-box; padding: 11px 16px; border: 1px solid var(--ai2-border-input); border-radius: 12px; font-size: 15px; outline: none; transition: border .15s, box-shadow .15s; background: var(--ai2-surface); color: var(--ai2-text); }
.ai2__search::placeholder { color: var(--ai2-text-muted); }
.ai2__search:focus { border-color: var(--ai2-focus-border); box-shadow: 0 0 0 3px var(--ai2-focus-ring); }
.ai2__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ai2__chip { border: 1px solid var(--ai2-border-input); background: var(--ai2-surface); color: var(--ai2-text-label); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; transition: all .15s; }
.ai2__chip em { font-style: normal; color: var(--ai2-text-muted); margin-left: 4px; font-size: 12px; }
.ai2__chip:hover { border-color: var(--ai2-focus-border); color: var(--ai2-chip-hover-text); }
.ai2__chip--on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.ai2__chip--on em { color: #c7d2fe; }

/* ---------- 分组 + 卡片 ---------- */
.ai2__group { margin-bottom: 26px; }
.ai2__group-title { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--ai2-text); margin: 0 0 12px; }
.ai2__group-dot { width: 5px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #6366f1, #8b5cf6); }
.ai2__group-count { font-style: normal; font-size: 12px; color: var(--ai2-text-muted); background: var(--ai2-surface-2); border-radius: 999px; padding: 2px 8px; }
.ai2__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

.ai2__card { position: relative; background: var(--ai2-surface); border: 1px solid var(--ai2-border); border-radius: 14px; padding: 14px; transition: all .18s; }
.ai2__card:hover { transform: translateY(-3px); box-shadow: var(--ai2-card-hover-shadow); border-color: var(--ai2-focus-border); }
.ai2__card--hot { border-color: var(--ai2-hot-border); background: var(--ai2-hot-bg); }
.ai2__card--off { opacity: .55; }
.ai2__card-link { display: flex; gap: 11px; align-items: flex-start; text-decoration: none; color: inherit; }
.ai2__card-icon { font-size: 26px; line-height: 1.2; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--ai2-icon-bg); border-radius: 11px; flex-shrink: 0; }
.ai2__card-body { min-width: 0; display: block; }
.ai2__card-title { display: block; font-size: 15px; font-weight: 600; color: var(--ai2-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai2__card-remark { display: block; font-size: 12px; color: var(--ai2-text-remark); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai2__hot, .ai2__off { font-style: normal; font-size: 10px; border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
.ai2__hot { background: var(--ai2-hot-chip-bg); color: var(--ai2-hot-chip-text); }
.ai2__off { background: var(--ai2-off-chip-bg); color: var(--ai2-off-chip-text); }

/* 管理操作 */
.ai2__card-actions { display: none; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--ai2-border); }
.ai2__card:hover .ai2__card-actions { display: flex; }
.ai2__act { background: none; border: none; padding: 0; font-size: 12px; cursor: pointer; color: var(--ai2-act-text); }
.ai2__act--edit:hover { color: var(--ai2-link-hover); }
.ai2__act--toggle:hover { color: var(--ai2-warn-text); }
.ai2__act--del:hover { color: var(--ai2-err-text); }

.ai2__empty, .ai2__noresult { text-align: center; color: var(--ai2-text-muted); padding: 50px 0; font-size: 15px; }

/* ---------- 弹窗 ---------- */
.ai2-modal-mask { position: fixed; inset: 0; background: var(--ai2-mask); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.ai2-modal-mask[aria-hidden="false"] { display: flex; }
.ai2-modal { background: var(--ai2-surface); border-radius: 16px; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; box-shadow: var(--ai2-modal-shadow); }
.ai2-modal__header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 6px; }
.ai2-modal__header h2 { margin: 0; font-size: 18px; color: var(--ai2-text); }
.ai2-modal__close { background: none; border: none; font-size: 18px; color: var(--ai2-text-muted); cursor: pointer; }
.ai2-modal__close:hover { color: var(--ai2-err-text); }
.ai2-modal__form { padding: 12px 22px 22px; }
.ai2-modal__row { margin-bottom: 14px; }
.ai2-modal__row label { display: block; font-size: 13px; color: var(--ai2-text-label); margin-bottom: 6px; }
.ai2-modal__row label em { color: var(--ai2-err-text); font-style: normal; }
.ai2-modal__row input[type="text"], .ai2-modal__row input[type="number"] { width: 100%; box-sizing: border-box; border: 1px solid var(--ai2-border-input); border-radius: 9px; padding: 9px 12px; font-size: 14px; outline: none; background: var(--ai2-surface); color: var(--ai2-text); }
.ai2-modal__row input::placeholder { color: var(--ai2-text-muted); }
.ai2-modal__row input:focus { border-color: var(--ai2-focus-border); box-shadow: 0 0 0 3px var(--ai2-focus-ring); }
.ai2-modal__row--half { display: flex; gap: 12px; }
.ai2-modal__row--half > div { flex: 1; }
.ai2-modal__row--checks { display: flex; gap: 22px; }
.ai2-check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ai2-text-label); cursor: pointer; margin: 0 !important; }
.ai2-modal__footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.ai2-modal__footer-gap { flex: 1; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
    .ai2 { padding: 12px 12px 40px; }
    .ai2__header h1 { font-size: 21px; }
    .ai2__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
    .ai2__card { padding: 11px; }
    .ai2__card-icon { width: 34px; height: 34px; font-size: 20px; }
    .ai2__card-actions { display: flex; }
}