/* 【由 Agent 完成】2026-10-08 数据模型入口提示页（model_notice.html）
   配色沿用 model_select.css：深 #16181d / 正文 #333333 / 次要 #6b7280 / 浅底 #f2f3f5 / 描边 #e6e8eb */

/* 【由 Agent 完成】2026-10-08 背景参照帮助中心首页（.hero + .hero-bg）：
   浅灰底 #f7f8fa + 四团浮动光斑 + 六颗上升粒子。
   sales_home.css 的 .hero-bg 只作用于帮助/营销页，本页不引那个文件（避免整站样式被覆盖），
   所以把光斑/粒子原样复刻一份并统一加 .mn-bg 作用域，不影响其它页面。 */
.mn-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;  /* 卡片 + 底部声明纵向排列 */
    justify-content: center;
    align-items: center;    /* 卡片高度由内容决定，不被拉伸到满屏（默认 stretch 会撑满） */
    padding: 40px 20px 60px;
    box-sizing: border-box;
    background: #f7f8fa;
    /* 与帮助中心 .mv-hero 一致：顶部功能栏 65px（64 + 1 边框），保证第一屏正好一屏 */
    min-height: calc(100vh - 65px);
}
@supports (height: 100dvh) {
    .mn-wrap { min-height: calc(100dvh - 65px); }
}

.mn-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.mn-bg .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .9;
    will-change: transform;
}
.mn-bg .orb-1 {
    width: 340px; height: 340px; left: -80px; top: -90px;
    background: radial-gradient(circle, rgba(0, 87, 255, .45), transparent 70%);
    animation: mnOrbFloat1 14s ease-in-out infinite alternate;
}
.mn-bg .orb-2 {
    width: 300px; height: 300px; right: -70px; top: 40px;
    background: radial-gradient(circle, rgba(46, 116, 255, .4), transparent 70%);
    animation: mnOrbFloat2 16s ease-in-out infinite alternate;
}
.mn-bg .orb-3 {
    width: 260px; height: 260px; left: 32%; bottom: -100px;
    background: radial-gradient(circle, rgba(124, 92, 255, .35), transparent 70%);
    animation: mnOrbFloat3 18s ease-in-out infinite alternate;
}
.mn-bg .orb-4 {
    width: 220px; height: 220px; right: 28%; bottom: 40px;
    background: radial-gradient(circle, rgba(0, 201, 167, .3), transparent 70%);
    animation: mnOrbFloat4 15s ease-in-out infinite alternate;
}
@keyframes mnOrbFloat1 { from { transform: translate(0,0) scale(1); } to { transform: translate(46px,34px) scale(1.08); } }
@keyframes mnOrbFloat2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-38px,44px) scale(1.06); } }
@keyframes mnOrbFloat3 { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,-36px) scale(1.1); } }
@keyframes mnOrbFloat4 { from { transform: translate(0,0) scale(1); } to { transform: translate(-26px,-28px) scale(.95); } }

/* 上升粒子 */
.mn-bg .particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: rgba(0, 87, 255, .55);
    opacity: 0;
    animation: mnRise linear infinite;
}
.mn-bg .p1 { left: 8%;  width: 10px; height: 10px; animation-duration: 12s; animation-delay: 0s; }
.mn-bg .p2 { left: 22%; width: 7px;  height: 7px;  background: rgba(46, 116, 255, .6);  animation-duration: 15s; animation-delay: 3s; }
.mn-bg .p3 { left: 38%; width: 8px;  height: 8px;  background: rgba(124, 92, 255, .55); animation-duration: 13s; animation-delay: 6s; }
.mn-bg .p4 { left: 56%; width: 6px;  height: 6px;  background: rgba(0, 201, 167, .6);   animation-duration: 17s; animation-delay: 2s; }
.mn-bg .p5 { left: 74%; width: 9px;  height: 9px;  background: rgba(0, 87, 255, .5);    animation-duration: 14s; animation-delay: 8s; }
.mn-bg .p6 { left: 90%; width: 7px;  height: 7px;  background: rgba(46, 116, 255, .55); animation-duration: 16s; animation-delay: 5s; }
@keyframes mnRise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    8%   { opacity: .7; }
    90%  { opacity: .35; }
    100% { transform: translateY(-520px) scale(.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mn-bg .orb,
    .mn-bg .particle { animation: none; }
}

/* 整页只有这一张卡片
   【由 Agent 完成】2026-10-08 卡片质感参照帮助中心分类卡（.mv-tier）：
   半透明白底 + 2px 背景模糊 + 无边框 + 14px 圆角 + 轻阴影 + 悬停上浮；
   帮助中心在 .mv-page-help 下把 hover 变色关掉了，这里同样只上浮不变色。 */
.mn-card {
    position: relative;      /* 压在 .mn-bg 之上 */
    z-index: 1;
    overflow: hidden;        /* 右上角折线纹路不出卡片 */
    width: 100%;
    max-width: 720px;
    box-sizing: border-box;
    /* 【由 Agent 完成】2026-10-08 下方留白与上方一致（都是 34px），卡片高度随文字换行自由延伸；
       2026-10-08 左右留白各 +15px（36 → 51） */
    padding: 34px 51px;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .05);
    text-align: center;
    transition: all .35s ease;
    /* 不写 both：动画结束后交回普通规则，hover 的 translateY 才能生效 */
    animation: mnFadeIn 0.28s ease;
}

/* 卡片内容压在装饰纹路之上（与 .mv-tier > * 同理） */
.mn-card > * {
    position: relative;
    z-index: 1;
}

/* 【由 Agent 完成】2026-10-08 卡片右上角折线纹路已按用户要求移除（原 .mn-card::before），
   卡片保持纯净的半透明玻璃底；如日后想加回来，找回本文件历史版本里的 .mn-card::before 即可。 */

/* 悬停：与帮助中心分类卡一致 —— 只上浮 + 阴影收小，白底不变蓝 */
.mn-card:hover {
    background: rgba(255, 255, 255, .82);
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .12);
}

@keyframes mnFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* 顶部小标签 */
.mn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f2f3f5;
    color: #3f3f46;
    font-size: 13px;
}

.mn-badge .layui-icon {
    font-size: 15px;
    color: #16181d;
}

.mn-title {
    margin: 18px 0 8px;
    font-size: 24px;
    line-height: 1.35;
    color: #16181d;
}

.mn-sub {
    margin: 0 0 26px;
    font-size: 14px;
    color: #6b7280;
}

/* 四条说明：左对齐，带小圆点 */
.mn-list {
    list-style: none;
    margin: 0;
    padding: 24px 0 6px;
    border-top: 1px solid #f2f2f2;
    text-align: left;
}

.mn-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.mn-list li:last-child { margin-bottom: 0; }

.mn-li-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: #16181d;
}

.mn-li-body { flex: 1 1 auto; min-width: 0; }

.mn-li-body b {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #16181d;
}

.mn-li-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: #6b7280;
}

/* 【由 Agent 完成】2026-10-08 页面最底部合规声明：文案与今日比赛页 .jc-declare 完全相同，
   样式也对齐（居中 / 12px / #9ca3af），本页不引 jingcai.css，所以这里单独写一条 */
.mn-declare {
    position: relative;
    z-index: 1;              /* 压在 .mn-bg 背景层之上 */
    margin-top: 20px;
    padding: 0 20px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
}

/* 【由 Agent 完成】2026-10-08 附属通知区：「仅供参考 / 欢迎反馈」属于次要信息，
   比主列表弱一档 —— 浅灰底块 + 更小字号 + 更浅字色，不再和重点条目并列抢视线 */
.mn-note {
    margin-top: 18px;
    padding: 14px 16px;
    background: rgba(22, 24, 29, .04);
    border-radius: 10px;
    text-align: left;
}

/* 【由 Agent 完成】2026-10-08 「补充说明」标题行已按用户要求取消（原 .mn-note-head），
   附属区只留两条小字说明 */

.mn-note p {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #8a90a0;
}

.mn-note p:last-child { margin-bottom: 0; }

.mn-note p b {
    font-weight: 600;
    color: #6b7280;      /* 比正文略深，但明显弱于主列表标题 #16181d */
}

/* 倒计时：圆环 + 秒数 */
.mn-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 28px 0 24px;
    padding-top: 24px;
    /* 与按钮区上方的分隔线统一为虚线 */
    border-top: 1px dashed #dcdfe4;
}

/* 【由 Agent 完成】2026-10-08 「立即进入 / 返回」上方一条虚线。
   这条线只在倒计时隐藏时才画（JS 隐藏倒计时时会给卡片加 .mn-no-count），
   避免倒计时恢复显示时出现「倒计时上方 + 按钮上方」两条线。 */
.mn-card.mn-no-count .mn-actions {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px dashed #dcdfe4;
}

.mn-ring {
    flex: 0 0 auto;
    transform: rotate(-90deg);   /* 从 12 点方向开始走 */
}

.mn-ring-bg {
    fill: none;
    stroke: #f2f3f5;
    stroke-width: 5;
}

.mn-ring-fg {
    fill: none;
    stroke: #16181d;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.95s linear;
}

.mn-count-text {
    font-size: 14px;
    color: #6b7280;
}

.mn-count-text b {
    margin-right: 4px;
    font-size: 22px;
    color: #16181d;
}

/* 两个按钮：主「立即进入」+ 次「返回」 */
.mn-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;         /* 手机端按钮各占 50% 时，倒计时自动换行到下一行 */
    gap: 12px;
}

/* 【由 Agent 完成】2026-10-08 倒计时（10 秒）嵌在「立即进入」按钮内
   （原来那块大圆环 .mn-count 已隐藏，避免页面上出现两个倒计时） */
.mn-cd {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    opacity: .78;                          /* 深色主按钮上略微压暗，不与按钮主文案抢视线 */
    font-variant-numeric: tabular-nums;    /* 数字等宽，倒数时不左右抖 */
}
.mn-cd b { font-weight: 600; }
.mn-cd-unit-short { display: none; }       /* 短文案「10s」只在手机端启用 */
/* 【由 Agent 完成】2026-10-08 「下次不再显示此页」复选框：整行换行到按钮下方
   （.mn-actions 已开 flex-wrap，给 width:100% 就会换到第二行；justify-content 由容器居中） */
.mn-skip { display: flex; align-items: center; justify-content: center; gap: 6px;
           width: 100%; margin-top: 14px; font-size: 13px; color: #6b7280;
           cursor: pointer; user-select: none; }
.mn-skip input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: #1e9fff; }

.mn-btn {
    height: 42px;
    min-width: 116px;
    padding: 0 22px;
    box-sizing: border-box;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    background: #ffffff;
    color: #333333;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.mn-btn:hover { background: #f2f3f5; }

.mn-btn-primary {
    border-color: #16181d;
    background: #16181d;
    color: #ffffff;
}

.mn-btn-primary:hover {
    background: #000000;
    border-color: #000000;
}

/* 手机端：留白收紧，按钮拉宽便于点按 */
@media screen and (max-width: 768px) {
    /* 左右 20px，与帮助中心手机端（.hero-inner padding: 0 20px）对齐 */
    .mn-wrap { padding: 22px 20px 40px; }

    /* 手机端：左右 20 → 35（+15）→ 40（+5），2026-10-08 再 -10 → 30；下方留白与上方对齐 */
    .mn-card { padding: 26px 30px; border-radius: 14px; }

    .mn-title { margin-top: 14px; font-size: 20px; }

    .mn-sub { margin-bottom: 20px; }

    /* 【由 Agent 完成】2026-10-08 手机端按钮排到列表上方后，列表这条 border-top 就落在按钮下边了，
       按用户要求去掉；间距改由按钮的 margin-bottom(18) + 这里的 padding-top(2) 控制 */
    .mn-list { padding-top: 2px; border-top: none; }

    .mn-count { margin: 22px 0 20px; padding-top: 18px; }

    /* 【由 Agent 完成】2026-10-08 手机端两个按钮并排（原来上下堆叠），各占一半 */
    .mn-actions { flex-direction: row; gap: 10px; }

    /* 【由 Agent 完成】2026-10-08 手机端按钮 2:1 分宽：立即进入 2/3、返回 1/3
       （各按 gap 10px 扣掉一半 5px，再加 1px 余量，保证不换行仍并排） */
    .mn-btn { flex: 0 0 auto; min-width: 0; padding: 0 10px; white-space: nowrap; }
    #mnEnter { width: calc(66.66% - 6px); }
    #mnBack  { width: calc(33.33% - 6px); }

    /* 按钮只有 2/3 宽，装不下完整文案，手机端切成短版「立即进入（10s）」 */
    .mn-cd { margin-left: 3px; }
    .mn-cd-unit-long  { display: none; }
    .mn-cd-unit-short { display: inline; }

    /* 【由 Agent 完成】2026-10-08 手机端把「立即进入 / 返回」排到「开放范围」那条列表上方：
       用 flex order 重排视觉顺序，DOM 不动 —— 桌面端顺序（说明 → 列表 → 按钮）保持不变。
       .mn-badge 是 inline-flex，改 flex 容器后要靠 align-self 居中，否则会被拉成整行宽。 */
    .mn-card { display: flex; flex-direction: column; }

    .mn-badge { align-self: center; order: 1; }
    .mn-title { order: 2; }
    .mn-sub   { order: 3; }
    .mn-actions { order: 4; margin: 0 0 18px; }
    .mn-list  { order: 5; }
    .mn-note  { order: 6; }
    .mn-count { order: 7; }

    /* 上面 order 生效后，虚线那条规则的 margin-top 26px 要压掉（特异性比 .mn-actions 高） */
    .mn-card.mn-no-count .mn-actions { margin-top: 0; }
}