@charset "UTF-8";
/* ================================================================
   瑞肯咨询 · 竖排菜单（嵌入版 / 384px 容器 / 全部常显）
   ----------------------------------------------------------------
   与 nav-menu.css 的区别：
     · 不要顶部 header，只要一个 <div class="nv-embed"> 容器
     · 下拉面板不再依赖 :hover，全部静态展开
     · 纯 CSS，零 JavaScript（没有任何显示/隐藏切换）
     · 默认宽度 384px，超出自动收缩为 100%（手机侧栏也安全）
     · 所有类名以 nv- 前缀 + 整段选择器都限定在 .nv-embed 内，
       不会污染目标站已有的样式

   目录：
     01  变量与容器（改这里换色 / 换宽度）
     02  分组面板
     03  行列表（默认外观：图标居左 + 文字）
     04  卡片网格外观（可选，加 nv-mode-card 类）
     05  小屏适配
     06  无障碍 / 动效偏好
   ================================================================ */


/* ============ 01 变量与容器 ============ */
.nv-embed {
    /* —— 需要改的都在这里 —— */
    --nv-w: 384px;
    /* 容器宽度 */
    --nv-orange: #cd292a;
    /* 品牌珊瑚橙（悬停 / 强调） */
    --nv-purple: #7C3AED;
    /* 品牌紫 */
    --nv-text: #232323;
    /* 一级标题文字 */
    --nv-sub: #4b5563;
    /* 条目文字 */
    --nv-line: #ececf0;
    /* 分隔线 / 边框 */
    --nv-radius: 12px;
    /* 圆角 */

    /* 分组面板背景（沿用原站下拉面板的品牌渐变） */
    --nv-panel-bg:
        radial-gradient(65.77% 101.32% at 71.18% 48.2%, #fff 0, hsla(0, 0%, 100%, 0) 100%),
        linear-gradient(90deg, rgba(255, 83, 83, .08) -5%, rgba(251, 138, 56, .08) 60.27%, rgba(66, 0, 255, .08) 99.63%),
        #fff;

    width: 100%;
    max-width: var(--nv-w);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--nv-text);
    text-align: left;
    -webkit-text-size-adjust: 100%;
}

/* 局部重置：只在容器内部生效，不影响目标站其他地方 */
.nv-embed,
.nv-embed *,
.nv-embed *::before,
.nv-embed *::after {
    box-sizing: border-box;
}

.nv-embed ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nv-embed a {
    color: inherit;
    text-decoration: none;
}


/* ============ 02 分组面板 ============ */
.nv-embed .nv-group {
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    background: var(--nv-panel-bg);
}

.nv-embed .nv-group:last-child {
    margin-bottom: 0;
}

/* 分组标题：左侧一根品牌色短竖条 */
.nv-embed .nv-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--nv-text);
}

.nv-embed .nv-group-title::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--nv-orange), var(--nv-purple));
}

/* 若分组标题本身就是链接（<a class="nv-group-title">），加个悬停反馈 */
a.nv-group-title:hover {
    color: var(--nv-orange);
}

/* ============ 03 行列表（默认外观） ============ */
.nv-embed .nv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    transition: background .18s, color .18s, transform .18s;
}

.nv-embed .nv-row:hover {
    background: #fff;
    color: var(--nv-orange);
    transform: translateX(2px);
        font-weight: bold;
}

.nv-embed .nv-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--nv-line);
    transition: border-color .18s;
}

.nv-embed .nv-row:hover .nv-ico {
    border-color: var(--nv-orange);
}

/* 原图标按 40×40 画布设计，这里等比缩小到 20px */
.nv-embed .nv-ico svg {
    width: 20px;
    height: 20px;
    display: block;
}

.nv-embed .nv-txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    color: var(--nv-sub);
    transition: color .18s;
}

.nv-embed .nv-row:hover .nv-txt {
    color: var(--nv-orange);
}

/* 可选：条目右侧的小箭头 */
.nv-embed .nv-row::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-right: 1.5px solid #c9ccd4;
    border-bottom: 1.5px solid #c9ccd4;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .18s, transform .18s;
}

.nv-embed .nv-row:hover::after {
    opacity: 1;
    transform: rotate(-45deg) translateX(2px);
    border-color: var(--nv-orange);
}

/* 首行「首页」：无分组面板，单独一条 */
.nv-embed .nv-solo {
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    background: var(--nv-panel-bg);
}


/* ============ 04 卡片网格外观（可选） ============ */
/* 用法：<div class="nv-embed nv-mode-card">，恢复原站的“图标在上、文字在下”卡片 */
.nv-embed.nv-mode-card .nv-group .nv-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.nv-embed.nv-mode-card .nv-row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px 12px;
    text-align: center;
    background: #fff;
    /* border: 1px solid var(--nv-line); */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.nv-embed.nv-mode-card .nv-row:hover {
    background: #fff;
    border-color: var(--nv-orange);
    box-shadow: 0 6px 18px rgba(255, 107, 53, .12);
    transform: translateY(-2px);
}

.nv-embed.nv-mode-card .nv-ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    background: #faf6ff;
}

.nv-embed.nv-mode-card .nv-ico svg {
    width: 22px;
    height: 22px;
}

.nv-embed.nv-mode-card .nv-row::after {
    display: none;
}


/* ============ 05 小屏适配 ============ */
/* 容器比 384px 窄时自然收缩；这里只调整密度 */
@media (max-width: 400px) {
    .nv-embed {
        --nv-w: 100%;
    }

    .nv-embed .nv-row {
        padding: 9px 8px;
    }

    .nv-embed.nv-mode-card .nv-group .nv-list {
        gap: 8px;
    }
}


/* ============ 06 无障碍 / 动效偏好 ============ */
.nv-embed a:focus-visible {
    outline: 2px solid var(--nv-orange);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .nv-embed *,
    .nv-embed *::before,
    .nv-embed *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}