@charset "utf-8";
/*
 * cp_ams —— 首页 / 帮助中心 / 常见问题 的样式
 *
 * 色系完全沿用主题（app.css 的 :root 变量）：
 *   深色底 #0b0a10 / 面板 #14121c / 文字 #f6edf4 / 次要文字 #a79aaa
 *   描边 #2c2634 / 强调粉 #e8a1c8 / 强调金 #d9b477 / 主渐变 linear-gradient(90deg,#b96898,#d3a17a)
 * 每个 var() 都写了**兜底值**：换主题（或主题没定义这些变量）时布局不会塌。
 *
 * 只在首页与 index-help / index-ask 输出（见 hook/header_link_after.htm 的条件）。
 * 本文件由首页模板引用，模板内不写内联 style（与 dashboard 同一套纪律）。
 */

/* ---------------- 先解决重复导航 ----------------
 * 主题 header 里自带「栏目导航 + 搜索框」（.tm-navlinks / .tm-search / 移动端 .tm-nav-mobile），
 * 与本插件的 $cp_ams_menu 形成两条导航，且落地页不需要站内搜索。
 * 本文件只在本插件的前台页面加载（route=index，见 hook/header_link_after.htm），
 * 所以这里直接隐藏：**只保留品牌与右侧用户区（登录/后台/退出）**。
 * 用 !important 是为了不被主题自身的媒体查询/后续规则翻回来；作用域仅限本插件的页面。
 * （如需全站隐藏搜索，把 .tm-search 那行单独放到全站样式里即可。）
 */
.tm-navlinks,
.tm-nav-mobile,
.tm-menu-toggle,
.tm-search { display: none !important; }

/* ---------------- 顶部菜单（$cp_ams_menu） ----------------
 * 菜单**注入在主题导航那一行里**（hook header_nav_logo_after.htm →
 * view/htm/header_nav.inc.htm 的 <!--{hook header_nav_logo_after.htm}-->，
 * 位置在 <div class="tm-wrap tm-nav"> 内部的品牌之后）。
 * 所以这里不再有独立的 .cpams-nav 容器行 —— 菜单与品牌、用户区同处一个 flex 行，
 * 页面只有**一行**导航（早期版本是"品牌一行 + 菜单一行"，看起来像两个导航）。
 */
.tm-nav .cpams-nav-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;          /* 桌面永不换行：始终只有一行 */
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;           /* 菜单项很多时横向滚动，而不是把布局撑成两行 */
    list-style: none;
    scrollbar-width: none;      /* 滚动条不占位（Firefox） */
}
.tm-nav .cpams-nav-list::-webkit-scrollbar { height: 0; }
.tm-nav .cpams-nav-item {
    flex: 0 0 auto;
    margin: 0;
}
.tm-nav .cpams-nav-link {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid transparent;      /* 与 .is-active 的尺寸对齐，避免选中时跳动 */
    border-radius: 999px;
    color: var(--muted, #a79aaa);
    font-size: 13.5px;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.tm-nav .cpams-nav-link:hover,
.tm-nav .cpams-nav-link:focus {
    color: var(--text, #f6edf4);
    background: var(--panel2, #1b1724);
    text-decoration: none;
}
.tm-nav .cpams-nav-link.is-active {
    color: #1a1016;
    background: var(--grad, linear-gradient(90deg, #b96898, #d3a17a));
    border-color: transparent;
    font-weight: 600;
}
/* 主题的 .tm-navlinks（栏目导航）被隐藏后，靠这个把用户区（登录/后台/退出）推到最右 */
.tm-nav .tm-nav-user { margin-left: auto; }

/* ---------------- 登录 / 注册页的品牌块 ----------------
 * 挂在主题 .tm-auth 卡片上方（hook user_login_start.htm / user_create_start.htm）。
 * 宽度与卡片一致（主题 .tm-auth 是 max-width:460px、居中），所以上下对齐。
 */
.cpams-auth-brand {
    max-width: 460px;
    margin: 26px auto 0;
    text-align: center;
}
.cpams-auth-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text, #f6edf4);
    letter-spacing: .5px;
}
.cpams-auth-title em {
    margin: 0 4px;
    font-style: normal;
    background: var(--grad, linear-gradient(90deg, #b96898, #d3a17a));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pink, #e8a1c8);
}
.cpams-auth-slogan {
    margin: 0;
    color: var(--muted, #a79aaa);
    font-size: 14px;
    letter-spacing: 1px;
}
@media (max-width: 900px) {
    .cpams-auth-brand { margin-top: 16px; }
    .cpams-auth-title { font-size: 21px; }
}

/* ---------------- 主视觉 ---------------- */
/* ⚠️ 选择器必须写到 `.tm-hero.cpams-hero X` 这一级：
 *    主题里有 `.tm-hero h1`（0,1,1）与 `.tm-hero p { max-width:720px; margin:0 }`（0,1,1），
 *    而单写 `.cpams-hero-title`（0,1,0）/`.cpams-hero-slogan`（0,1,0）**特异性更低会被压掉** ——
 *    症状：标题字号不生效、标语被塞进一个靠左的 720px 盒子里（文字在盒内居中 → 视觉偏左）。
 */
.tm-hero.cpams-hero {
    margin: 26px 0 8px;
    padding: 56px 20px 26px;
    text-align: center;
}
.tm-hero.cpams-hero .cpams-hero-title {
    margin: 0 0 14px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text, #f6edf4);
    letter-spacing: .5px;
    word-break: break-word;
}
.tm-hero.cpams-hero .cpams-hero-title em {
    margin: 0 6px;
    font-style: normal;
    background: var(--grad, linear-gradient(90deg, #b96898, #d3a17a));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pink, #e8a1c8);
}
.tm-hero.cpams-hero .cpams-hero-slogan {
    /* max-width 保留（一行别太长），但**盒子本身要居中**：margin 左右 auto。
       只写 text-align:center 不够 —— 主题给 .tm-hero p 加了 max-width 与 margin:0。 */
    max-width: 720px;
    margin: 0 auto 26px;
    font-size: 20px;
    color: var(--muted, #a79aaa);
    letter-spacing: 1px;
    text-align: center;
}
.tm-hero.cpams-hero .cpams-hero-actions { justify-content: center; }

/* 主按钮跟随主题渐变（主题的 .tm-btn--primary 若已定义则不覆盖色值，只补渐变兜底） */
.tm-hero.cpams-hero .cpams-hero-actions .tm-btn--primary {
    background-image: var(--grad, linear-gradient(90deg, #b96898, #d3a17a));
    border-color: transparent;
    color: #1a1016;
    font-weight: 600;
}
.tm-hero.cpams-hero .cpams-hero-actions .tm-btn--ghost {
    border: 1px solid var(--line-strong, #60445b);
    color: var(--text, #f6edf4);
}

/* ---------------- 三大卖点 ---------------- */
.cpams-feats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 30px 0 48px;
}
.cpams-feat {
    position: relative;
    padding: 30px 22px;
    border: 1px solid var(--line, #2c2634);
    border-radius: var(--radius, 14px);
    background: var(--panel, #14121c);
    box-shadow: var(--shadow, 0 12px 32px rgba(0, 0, 0, .38));
    text-align: center;
    transition: transform .18s ease, border-color .18s ease;
}
.cpams-feat:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong, #60445b);
}
.cpams-feat-icon {
    margin-bottom: 14px;
    font-size: 34px;
    line-height: 1;
    background: var(--grad, linear-gradient(90deg, #b96898, #d3a17a));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pink, #e8a1c8);
}
.cpams-feat-title {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    color: var(--text, #f6edf4);
}
.cpams-feat-desc {
    margin: 0;
    font-size: 14px;
    color: var(--muted, #a79aaa);
}
.cpams-ok { color: var(--gold, #d9b477); }

/* ---------------- 帮助 / 常见问题：内容块 ---------------- */
.cpams-doc {
    margin-bottom: 22px;
    padding: 24px 26px;
}
.cpams-doc h2 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line, #2c2634);
    font-size: 20px;
    color: var(--text, #f6edf4);
}
.cpams-doc h3 {
    margin: 22px 0 12px;
    font-size: 16px;
    color: var(--pink-soft, #d9abc7);
}
.cpams-doc p { color: var(--text, #f6edf4); line-height: 1.9; }
.cpams-doc a { color: var(--pink, #e8a1c8); }
.cpams-doc code {
    padding: 2px 7px;
    border: 1px solid var(--line, #2c2634);
    border-radius: 6px;
    background: var(--panel3, #15131b);
    color: var(--gold, #d9b477);
    word-break: break-all;
}
.cpams-doc-tip { color: var(--muted, #a79aaa) !important; font-size: 14px; }
.cpams-doc-img { margin: 16px 0; text-align: center; }
.cpams-doc-img img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line, #2c2634);
    border-radius: var(--radius-sm, 10px);
}
.cpams-doc-missing {
    padding: 14px 16px;
    border: 1px dashed var(--line-strong, #60445b);
    border-radius: var(--radius-sm, 10px);
    color: var(--muted, #a79aaa) !important;
    font-size: 13px;
}

/* 播放器代码块：等宽 + 横向滚动，避免长 iframe 代码撑破布局 */
.cpams-code {
    margin: 12px 0;
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--line, #2c2634);
    border-radius: var(--radius-sm, 10px);
    background: #08070c;
    color: #e9d7e6;
    font-size: 12.5px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-all;
}

/* 参数表：键值两列 */
.cpams-table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
}
.cpams-table th,
.cpams-table td {
    padding: 10px 14px;
    border: 1px solid var(--line, #2c2634);
    text-align: left;
    font-size: 14px;
    color: var(--text, #f6edf4);
}
.cpams-table th {
    width: 130px;
    background: var(--panel2, #1b1724);
    color: var(--muted, #a79aaa);
    font-weight: 500;
    white-space: nowrap;
}

/* 键值列表：接口地址等 */
.cpams-kv { margin: 12px 0; padding: 0; list-style: none; }
.cpams-kv li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line, #2c2634);
}
.cpams-kv li:last-child { border-bottom: 0; }
.cpams-kv span { min-width: 120px; color: var(--muted, #a79aaa); font-size: 14px; }

/* 警告块：注意！！！ */
.cpams-warn {
    margin: 16px 0 4px;
    padding: 16px 18px;
    border: 1px solid var(--line-strong, #60445b);
    border-left: 4px solid var(--gold, #d9b477);
    border-radius: var(--radius-sm, 10px);
    background: rgba(217, 180, 119, .07);
}
.cpams-warn p { margin: 0 0 8px; line-height: 1.9; }
.cpams-warn p:last-child { margin-bottom: 0; }
.cpams-warn-title {
    color: var(--gold, #d9b477) !important;
    font-weight: 700;
    letter-spacing: .5px;
}
.cpams-warn--strong { border-left-color: var(--pink, #e8a1c8); background: rgba(232, 161, 200, .08); }
.cpams-warn--strong p { color: var(--pink, #e8a1c8) !important; }

/* ---------------- 常见问题 ---------------- */
.cpams-faq-list { margin: 0; }
.cpams-faq-list dt {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--line, #2c2634);
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #f6edf4);
}
.cpams-faq-list dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cpams-faq-list dd {
    margin: 10px 0 0 0;
    padding-left: 52px;
    color: var(--muted, #a79aaa);
    font-size: 14px;
    line-height: 1.9;
}
.cpams-q {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--grad, linear-gradient(90deg, #b96898, #d3a17a));
    color: #1a1016;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.cpams-no-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cpams-no { font-size: 12px; }
.cpams-no-empty { color: var(--muted, #a79aaa); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
    .cpams-feats { grid-template-columns: 1fr; }
    /* 手机上把菜单放到第二行：品牌与用户区一行、菜单一行（用 order 调顺序，
       因为 DOM 里菜单在 .tm-nav-user 之前） */
    .tm-nav {
        height: auto;
        min-height: var(--header-h);
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 8px;
        row-gap: 6px;
    }
    .tm-nav .tm-nav-user { order: 2; }
    .tm-nav .cpams-nav-list { order: 3; flex: 1 1 100%; }

    .tm-hero.cpams-hero { padding: 36px 12px 16px; }
    .tm-hero.cpams-hero .cpams-hero-title { font-size: 30px; }
    .tm-hero.cpams-hero .cpams-hero-slogan { font-size: 16px; }
    .cpams-doc { padding: 18px 16px; }
    .cpams-faq-list dd { padding-left: 0; }
    .cpams-table th { width: 96px; }
}