/* ==========================================================================
   notion.css — 懂你AI课堂 · 用户帮助站 Notion 风格主题
   设计目标：
     - 像大厂产品（Notion / Linear / Vercel / Stripe Docs）
     - 视觉温暖、留白充足、信息密度低、人性化
     - 适合家长/学生/老师使用（无技术黑话）
     - 移动端友好
   设计令牌：
     - 品牌色: #3451b2 (懂你蓝) / #3eaf7c (绿) / #f59e0b (橙) / #ef4444 (红)
     - 中性色: 浅灰系 + 白
   ========================================================================== */

:root {
    /* 品牌色 */
    --nc-brand: #3451b2;
    --nc-brand-2: #5b6bff;
    --nc-brand-soft: #eef0ff;
    --nc-green: #3eaf7c;
    --nc-green-soft: #e6f7ee;
    --nc-orange: #f59e0b;
    --nc-orange-soft: #fef3c7;
    --nc-red: #ef4444;
    --nc-red-soft: #fee2e2;
    --nc-purple: #8b5cf6;
    --nc-purple-soft: #f3e8ff;

    /* 中性 */
    --nc-bg: #ffffff;
    --nc-bg-2: #fafbfc;
    --nc-bg-3: #f4f5f7;
    --nc-text: #1f2937;
    --nc-text-2: #4b5563;
    --nc-text-3: #6b7280;
    --nc-text-4: #9ca3af;
    --nc-border: #e5e7eb;
    --nc-border-2: #f3f4f6;
    --nc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --nc-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --nc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --nc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);

    /* 圆角 */
    --nc-radius-sm: 6px;
    --nc-radius: 10px;
    --nc-radius-md: 14px;
    --nc-radius-lg: 20px;
    --nc-radius-xl: 28px;

    /* 字体 */
    --nc-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
        "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

html.dark {
    --nc-bg: #191919;
    --nc-bg-2: #202020;
    --nc-bg-3: #2a2a2a;
    --nc-text: #ececec;
    --nc-text-2: #b8b8b8;
    --nc-text-3: #8e8e8e;
    --nc-text-4: #6b6b6b;
    --nc-border: #2a2a2a;
    --nc-border-2: #2a2a2a;
    --nc-brand-soft: #1f2240;
    --nc-green-soft: #1a3024;
    --nc-orange-soft: #3a2c10;
    --nc-red-soft: #3a1818;
    --nc-purple-soft: #2a1f3a;
    --nc-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --nc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --nc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   基础
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    background: var(--nc-bg);
    color: var(--nc-text);
    font-family: var(--nc-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    line-height: 1.65;
}

* { box-sizing: border-box; }

a {
    color: var(--nc-brand);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   顶部导航栏（Notion 风格：白底 + 细线 + 居中 logo）
   ========================================================================== */
.NCHeader {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nc-bg);
    border-bottom: 1px solid var(--nc-border);
    height: 60px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: saturate(180%) blur(8px);
}

.NCHeaderLogo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--nc-text);
    text-decoration: none;
    flex-shrink: 0;
}
.NCHeaderLogo:hover { text-decoration: none; }
.NCHeaderLogo .logo-icon {
    font-size: 22px;
}
.NCHeaderSearch {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}
.NCHeaderSearch input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: var(--nc-bg-2);
    color: var(--nc-text);
    font-size: 14px;
    font-family: var(--nc-font);
    outline: none;
    transition: all 0.15s;
}
.NCHeaderSearch input:focus {
    background: var(--nc-bg);
    border-color: var(--nc-brand);
    box-shadow: 0 0 0 3px var(--nc-brand-soft);
}
.NCHeaderSearch .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nc-text-3);
    font-size: 14px;
    pointer-events: none;
}
.NCHeaderSearch .search-shortcut {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nc-text-4);
    font-size: 11px;
    font-family: monospace;
    background: var(--nc-bg-3);
    border: 1px solid var(--nc-border);
    border-radius: 4px;
    padding: 2px 6px;
    pointer-events: none;
}

.NCHeaderNav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.NCHeaderNav a {
    color: var(--nc-text-2);
    padding: 6px 12px;
    border-radius: var(--nc-radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.NCHeaderNav a:hover {
    background: var(--nc-bg-3);
    color: var(--nc-text);
    text-decoration: none;
}
.NCHeaderNav a.active {
    color: var(--nc-brand);
    background: var(--nc-brand-soft);
}
.NCHeaderNav a.btn-primary {
    background: var(--nc-brand);
    color: white;
    margin-left: 8px;
}
.NCHeaderNav a.btn-primary:hover {
    background: var(--nc-brand-2);
    color: white;
}
/* 使用说明 — Ghost 透明边框样式（与 /dongniai/ 完全一致） */
.NCHeaderNav a.btn-help {
    border: 1px solid var(--nc-brand-soft);
    background: transparent;
    color: var(--nc-brand);
}
.NCHeaderNav a.btn-help:hover {
    background: var(--nc-brand-soft);
    border-color: var(--nc-brand);
    color: var(--nc-brand);
}
/* 使用说明外发链接 ↗ 箭头颜色 略淡 */
.NCHeaderNav a.btn-help .ext-arrow {
    opacity: 0.6;
    margin-left: 2px;
    font-size: 11px;
}
/* 通知铃铛（图标按钮） */
.NCHeaderNav a.icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--nc-text-2);
    border-radius: var(--nc-radius-sm);
}
.NCHeaderNav a.icon-btn:hover {
    background: var(--nc-bg-3);
    color: var(--nc-text);
}
/* 登录/注册 — 胶囊按钮组 */
.NCHeaderUserBtn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--nc-text-2);
    text-decoration: none;
    transition: all 0.15s;
    margin-left: 4px;
}
.NCHeaderUserBtn:hover {
    background: var(--nc-bg-3);
    color: var(--nc-text);
    text-decoration: none;
}
.NCHeaderUserBtn.btn-register {
    background: var(--nc-brand);
    color: white;
    margin-left: 6px;
    box-shadow: 0 2px 8px rgba(52, 81, 178, 0.25);
}
.NCHeaderUserBtn.btn-register:hover {
    background: var(--nc-brand-2);
    color: white;
    box-shadow: 0 4px 12px rgba(52, 81, 178, 0.35);
}

.NCHeaderActions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}
.NCIconBtn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--nc-text-2);
    border-radius: var(--nc-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
}
.NCIconBtn:hover {
    background: var(--nc-bg-3);
    color: var(--nc-text);
}

/* 移动端汉堡菜单 */
.NCMenuToggle { display: none; }

@media (max-width: 768px) {
    .NCHeaderNav { display: none; }
    .NCMenuToggle { display: flex; }
    .NCHeaderSearch input { padding-right: 10px; }
    .NCHeaderSearch .search-shortcut { display: none; }
}

/* ==========================================================================
   主体布局
   ========================================================================== */
.NCMain {
    flex: 1;
    width: 100%;
}

.NCLayout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   Notion 风首页 hero
   ========================================================================== */
.NCHero {
    text-align: center;
    padding: 80px 24px 56px;
    position: relative;
}

.NCHeroBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--nc-brand-soft);
    color: var(--nc-brand);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
}

.NCHeroTitle {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 20px;
    color: var(--nc-text);
    letter-spacing: -0.02em;
}
.NCHeroTitle em {
    font-style: normal;
    background: linear-gradient(135deg, var(--nc-brand) 0%, var(--nc-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.NCHeroSubtitle {
    font-size: 18px;
    line-height: 1.6;
    color: var(--nc-text-2);
    max-width: 640px;
    margin: 0 auto 32px;
}

.NCHeroSearch {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}
.NCHeroSearch input {
    width: 100%;
    height: 52px;
    padding: 0 60px 0 52px;
    border: 1px solid var(--nc-border);
    border-radius: 999px;
    background: var(--nc-bg);
    color: var(--nc-text);
    font-size: 16px;
    font-family: var(--nc-font);
    outline: none;
    box-shadow: var(--nc-shadow-md);
    transition: all 0.2s;
}
.NCHeroSearch input:focus {
    border-color: var(--nc-brand);
    box-shadow: 0 0 0 4px var(--nc-brand-soft), var(--nc-shadow-md);
}
.NCHeroSearch .search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--nc-text-3);
}
.NCHeroSearch .search-shortcut {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nc-text-4);
    font-size: 12px;
    background: var(--nc-bg-3);
    border: 1px solid var(--nc-border);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: monospace;
    pointer-events: none;
}

/* ==========================================================================
   角色化入口（家长/老师/学生）
   ========================================================================== */
.NCRoles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 64px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}
.NCRole {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    padding: 24px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--nc-text);
    transition: all 0.2s;
    cursor: pointer;
}
.NCRole:hover {
    border-color: var(--nc-brand);
    box-shadow: var(--nc-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.NCRoleIcon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
.NCRole[data-role="parent"] .NCRoleIcon { background: var(--nc-orange-soft); }
.NCRole[data-role="teacher"] .NCRoleIcon { background: var(--nc-brand-soft); }
.NCRole[data-role="student"] .NCRoleIcon { background: var(--nc-green-soft); }
.NCRoleTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.NCRoleDesc {
    font-size: 13px;
    color: var(--nc-text-3);
}

@media (max-width: 700px) {
    .NCRoles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   栏目卡片网格
   ========================================================================== */
.NCSection {
    margin: 64px 0;
}
.NCSectionHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
}
.NCSectionTitle {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: var(--nc-text);
    letter-spacing: -0.01em;
}
.NCSectionDesc {
    font-size: 14px;
    color: var(--nc-text-3);
    margin-top: 4px;
}
.NCSectionLink {
    font-size: 14px;
    color: var(--nc-brand);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.NCSectionLink:hover { text-decoration: underline; }

.NCGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .NCGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .NCGrid { grid-template-columns: 1fr; }
}

.NCCard {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    padding: 24px;
    text-decoration: none;
    color: var(--nc-text);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 160px;
}
.NCCard:hover {
    border-color: var(--nc-brand);
    box-shadow: var(--nc-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.NCCardIcon {
    width: 48px;
    height: 48px;
    border-radius: var(--nc-radius);
    background: var(--nc-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.NCCardTitle {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--nc-text);
}
.NCCardDesc {
    font-size: 13.5px;
    color: var(--nc-text-2);
    line-height: 1.55;
    flex: 1;
}
.NCCardMeta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--nc-text-4);
    margin-top: 4px;
}
.NCCardMeta .meta-arrow {
    margin-left: auto;
    color: var(--nc-text-4);
    transition: transform 0.2s;
}
.NCCard:hover .meta-arrow {
    color: var(--nc-brand);
    transform: translateX(2px);
}

/* ==========================================================================
   热门问题（FAQ 摘要）
   ========================================================================== */
.NCFAQ {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 700px) {
    .NCFAQ { grid-template-columns: 1fr; }
}
.NCFAQItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--nc-bg-2);
    border: 1px solid var(--nc-border-2);
    border-radius: var(--nc-radius);
    text-decoration: none;
    color: var(--nc-text);
    transition: all 0.15s;
}
.NCFAQItem:hover {
    background: var(--nc-bg);
    border-color: var(--nc-brand);
    text-decoration: none;
}
.NCFAQItem .q-icon {
    color: var(--nc-brand);
    font-size: 18px;
    flex-shrink: 0;
}
.NCFAQItem .q-text {
    flex: 1;
    font-size: 14px;
}
.NCFAQItem .q-arrow {
    color: var(--nc-text-4);
    font-size: 14px;
}

/* ==========================================================================
   最近更新
   ========================================================================== */
.NCRecent {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.NCRecentItem {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: var(--nc-radius);
    text-decoration: none;
    color: var(--nc-text);
    transition: background 0.15s;
}
.NCRecentItem:hover {
    background: var(--nc-bg-2);
    text-decoration: none;
}
.NCRecentItem .r-icon {
    font-size: 16px;
    color: var(--nc-text-3);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.NCRecentItem .r-content {
    flex: 1;
    min-width: 0;
}
.NCRecentItem .r-title {
    font-size: 14.5px;
    color: var(--nc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.NCRecentItem .r-meta {
    font-size: 12px;
    color: var(--nc-text-4);
    margin-top: 2px;
}
.NCRecentItem .r-time {
    font-size: 12px;
    color: var(--nc-text-4);
    flex-shrink: 0;
}

/* ==========================================================================
   文章页（Notion 风格）
   ========================================================================== */
.NCArticle {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 0 64px;
}
.NCArticleHeader {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--nc-border);
}
.NCArticleBreadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--nc-text-3);
    margin-bottom: 12px;
}
.NCArticleBreadcrumb a {
    color: var(--nc-text-3);
    text-decoration: none;
}
.NCArticleBreadcrumb a:hover { color: var(--nc-brand); }
.NCArticleBreadcrumb .sep { color: var(--nc-text-4); }

.NCArticleTitle {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--nc-text);
    letter-spacing: -0.02em;
}
.NCArticleMeta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--nc-text-3);
}
.NCArticleMeta .m-icon { color: var(--nc-text-4); }
.NCArticleMeta .m-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.NCArticleMeta .m-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--nc-brand);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.NCArticleContent {
    font-size: 16px;
    line-height: 1.75;
    color: var(--nc-text);
}
.NCArticleContent h1,
.NCArticleContent h2,
.NCArticleContent h3 {
    color: var(--nc-text);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 40px 0 16px;
}
.NCArticleContent h1 { font-size: 30px; padding-top: 8px; }
.NCArticleContent h2 { font-size: 24px; padding-top: 16px; border-top: 1px solid var(--nc-border-2); }
.NCArticleContent h3 { font-size: 19px; }
.NCArticleContent p { margin: 0 0 16px; }
.NCArticleContent ul, .NCArticleContent ol { margin: 0 0 20px; padding-left: 28px; }
.NCArticleContent li { margin-bottom: 6px; }
.NCArticleContent blockquote {
    border-left: 4px solid var(--nc-brand);
    padding: 8px 16px;
    margin: 20px 0;
    background: var(--nc-brand-soft);
    color: var(--nc-text);
    border-radius: 0 var(--nc-radius) var(--nc-radius) 0;
}
.NCArticleContent blockquote p { margin: 4px 0; }
.NCArticleContent code {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    background: var(--nc-bg-3);
    color: var(--nc-red);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88em;
}
.NCArticleContent pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 18px 22px;
    border-radius: var(--nc-radius);
    overflow-x: auto;
    margin: 20px 0;
    font-size: 13.5px;
    line-height: 1.6;
}
.NCArticleContent pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}
.NCArticleContent img {
    max-width: 100%;
    border-radius: var(--nc-radius);
    margin: 16px 0;
    box-shadow: var(--nc-shadow);
}
.NCArticleContent table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}
.NCArticleContent th,
.NCArticleContent td {
    border: 1px solid var(--nc-border);
    padding: 10px 14px;
    text-align: left;
}
.NCArticleContent th {
    background: var(--nc-bg-2);
    font-weight: 600;
}
.NCArticleContent a {
    color: var(--nc-brand);
    text-decoration: underline;
    text-decoration-color: var(--nc-brand-soft);
    text-underline-offset: 2px;
}
.NCArticleContent a:hover {
    text-decoration-color: var(--nc-brand);
}

.NCArticleNav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--nc-border);
}
.NCArticleNavItem {
    flex: 1;
    padding: 16px 20px;
    background: var(--nc-bg-2);
    border: 1px solid var(--nc-border-2);
    border-radius: var(--nc-radius);
    text-decoration: none;
    color: var(--nc-text);
    transition: all 0.15s;
    max-width: 45%;
}
.NCArticleNavItem:hover {
    background: var(--nc-bg);
    border-color: var(--nc-brand);
    text-decoration: none;
}
.NCArticleNavItem.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.NCArticleNavItem .nav-label {
    font-size: 12px;
    color: var(--nc-text-3);
    margin-bottom: 4px;
}
.NCArticleNavItem .nav-title {
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.NCArticleNavItem.next {
    text-align: right;
}

/* ==========================================================================
   错误页
   ========================================================================== */
.NCError {
    text-align: center;
    padding: 80px 24px;
}
.NCError .emoji { font-size: 64px; margin-bottom: 16px; }
.NCError h2 { font-size: 28px; margin: 0 0 12px; }
.NCError p { color: var(--nc-text-3); margin-bottom: 24px; }

/* ==========================================================================
   底部
   ========================================================================== */
.NCFooter {
    border-top: 1px solid var(--nc-border);
    padding: 32px 24px;
    text-align: center;
    color: var(--nc-text-3);
    font-size: 13px;
    background: var(--nc-bg-2);
}
.NCFooter a { color: var(--nc-text-2); }
.NCFooter a:hover { color: var(--nc-brand); }
.NCFooterLinks {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* ==========================================================================
   移动端 sidebar（汉堡菜单）
   ========================================================================== */
.NCSidebarMobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.NCSidebarMobile.show {
    display: block;
    opacity: 1;
}
.NCSidebarMobile .drawer {
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: var(--nc-bg);
    padding: 24px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s;
}
.NCSidebarMobile.show .drawer {
    transform: translateX(0);
}
.NCSidebarMobile h3 {
    margin: 0 0 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nc-text-4);
    font-weight: 600;
}
.NCSidebarMobile a {
    display: block;
    padding: 10px 12px;
    color: var(--nc-text);
    border-radius: var(--nc-radius-sm);
    text-decoration: none;
    margin: 2px 0;
}
.NCSidebarMobile a.active {
    background: var(--nc-brand-soft);
    color: var(--nc-brand);
    font-weight: 600;
}

/* ==========================================================================
   加载状态
   ========================================================================== */
.NCLoading {
    text-align: center;
    padding: 80px 24px;
    color: var(--nc-text-3);
}
.NCLoading .spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--nc-bg-3);
    border-top-color: var(--nc-brand);
    border-radius: 50%;
    animation: nc-spin 0.8s linear infinite;
    margin-bottom: 12px;
}
@keyframes nc-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   响应式断点
   ========================================================================== */
@media (max-width: 768px) {
    .NCHero { padding: 48px 16px 32px; }
    .NCHeroTitle { font-size: 32px; }
    .NCHeroSubtitle { font-size: 15px; }
    .NCHeroSearch input { height: 46px; font-size: 15px; }
    .NCSection { margin: 40px 0; }
    .NCSectionTitle { font-size: 22px; }
    .NCArticle { padding: 24px 0 48px; }
    .NCArticleTitle { font-size: 28px; }
    .NCArticleHeader { margin-bottom: 20px; }
    .NCArticleContent { font-size: 15px; line-height: 1.7; }
    .NCArticleNav { flex-direction: column; }
    .NCArticleNavItem { max-width: 100%; }
    .NCLayout { padding: 0 16px; }
}

@media (max-width: 480px) {
    .NCHeroTitle { font-size: 26px; }
    .NCHeroSearch input { font-size: 14px; }
    .NCCard { padding: 18px; }
    .NCCardIcon { width: 40px; height: 40px; font-size: 22px; }
}

/* ==========================================================================
   顶栏：与 /dongniai/ 完全一致（v2 — 2026-07-07 老板要求）
   - 68px 高 / max-width 1200 / 居中
   - Logo + 5 主链接 + 搜索框（嵌在使用说明右侧）+ 通知 + 登录/注册 + 主题
   ========================================================================== */
.NCDongniaiHeader {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    height: 68px;
    border-bottom: 1px solid var(--nc-border);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
html.dark .NCDongniaiHeader {
    background: var(--nc-bg);
    border-bottom-color: var(--nc-border);
}
.NCDongniaiHeaderInner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Logo */
.NCDongniaiLogo {
    font-size: 20px;
    font-weight: 900;
    color: #4F46E5;
    letter-spacing: -0.5px;
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 16px;
}
.NCDongniaiLogo:hover { text-decoration: none; }
.NCDongniaiLogoEm {
    color: #1E293B;
    font-weight: 700;
}
html.dark .NCDongniaiLogoEm {
    color: #ececec;
}

/* 主导航 */
.NCDongniaiNav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    flex-wrap: nowrap;
}
.NCDongniaiNav li {
    display: flex;
    align-items: center;
}
.NCDongniaiNav a.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.NCDongniaiNav a.nav-link:hover {
    color: #4F46E5;
    background: rgba(79, 70, 229, 0.06);
    text-decoration: none;
}
html.dark .NCDongniaiNav a.nav-link {
    color: #b8b8b8;
}
html.dark .NCDongniaiNav a.nav-link:hover {
    color: #6c8fff;
    background: rgba(108, 143, 255, 0.1);
}

/* "立即上课" — 紫渐变实心（主 CTA） */
.NCDongniaiNav a.btn-cta {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    margin: 0 4px;
}
.NCDongniaiNav a.btn-cta:hover {
    color: white;
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
    transform: translateY(-1px);
}

/* "使用说明" — Ghost 边框 */
.NCDongniaiNav a.btn-ghost {
    border: 1px solid rgba(79, 70, 229, 0.20);
    background: rgba(79, 70, 229, 0.04);
    color: #4F46E5;
}
.NCDongniaiNav a.btn-ghost:hover {
    border-color: rgba(79, 70, 229, 0.35);
    background: rgba(79, 70, 229, 0.10);
    color: #4F46E5;
    text-decoration: none;
}
.NCDongniaiNav a.btn-ghost .ext-arrow {
    opacity: 0.6;
    margin-left: 2px;
    font-size: 11px;
}

/* "使用说明 + 搜索框" 容器 */
.nav-help-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 搜索框（嵌在"使用说明"右侧） */
.NCDongniaiSearch {
    position: relative;
    width: 240px;
}
.NCDongniaiSearch input {
    width: 100%;
    height: 36px;
    padding: 0 64px 0 36px;
    border: 1px solid var(--nc-border);
    border-radius: 999px;
    background: var(--nc-bg-2);
    color: var(--nc-text);
    font-size: 14px;
    font-family: var(--nc-font);
    outline: none;
    transition: all 0.15s;
}
.NCDongniaiSearch input:focus {
    background: var(--nc-bg);
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.NCDongniaiSearch .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nc-text-3);
    font-size: 14px;
    pointer-events: none;
}
.NCDongniaiSearch .search-shortcut {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nc-text-4);
    font-size: 11px;
    font-family: monospace;
    background: var(--nc-bg-3);
    border: 1px solid var(--nc-border);
    border-radius: 4px;
    padding: 1px 6px;
    pointer-events: none;
}

/* 右侧用户区 */
.NCDongniaiUser {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.NCDongniaiIconBtn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--nc-text-2);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.NCDongniaiIconBtn:hover {
    background: var(--nc-bg-3);
    color: var(--nc-text);
    text-decoration: none;
}
.NCDongniaiMenuToggle { display: none; }

.NCDongniaiUserBtn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    background: transparent;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.NCDongniaiUserBtn:hover {
    background: #F4F5FA;
    color: #1E293B;
    text-decoration: none;
}
html.dark .NCDongniaiUserBtn {
    color: #b8b8b8;
}
html.dark .NCDongniaiUserBtn:hover {
    background: #2a2a2a;
    color: #ececec;
}
.NCDongniaiUserBtn.btn-register {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: white;
    margin-left: 4px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.NCDongniaiUserBtn.btn-register:hover {
    color: white;
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
    transform: translateY(-1px);
}

/* 移动端 */
@media (max-width: 900px) {
    .NCDongniaiHeaderInner { gap: 12px; padding: 0 16px; }
    .NCDongniaiNav .nav-link { padding: 8px 10px; font-size: 13px; }
    .NCDongniaiLogo { font-size: 18px; margin-right: 8px; }
    .NCDongniaiSearch { width: 160px; }
    .NCDongniaiSearch input { padding: 0 10px 0 32px; font-size: 13px; }
    .NCDongniaiSearch .search-shortcut { display: none; }
}

/* dn-hidden-submit: HTML5 form 需要 default submit button 才会在 Enter 键时提交
   用 visibility:hidden + position:absolute 让 button 不可见但保留在 DOM 里
   (不能用 position:absolute;left:-9999px 那类眼不见隐藏, browser 不知道存在就不会用)
   v11 (2026-07-09 22:31) 修复: 此块必须在 @media (max-width: 900px) 外面,
   不然 desktop 上 dn-hidden-submit 不生效 → hidden button 占据物理空间
   → form 高度被撑高 24.75px → 放大镜和搜索按钮被挤到搜索框下面 */
.dn-hidden-submit {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .NCDongniaiNav li:not(.nav-help-wrap) { display: none; }
    .nav-help-wrap .btn-ghost { padding: 6px 10px; font-size: 12px; }
    .NCDongniaiSearch { width: 140px; }
    .NCDongniaiUserBtn:not(.btn-register) { display: none; }
    .NCDongniaiMenuToggle { display: inline-flex; }
}
@media (max-width: 540px) {
    .NCDongniaiSearch { display: none; }
}

/* 通知未读红点 badge（与 /dongniai/ NoticeBell 一致） */
#help-notice-btn {
    position: relative;
}
#help-notice-btn .notice-icon {
    display: inline-block;
    line-height: 1;
}
#help-notice-btn .notice-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #ffffff;
}
html.dark #help-notice-btn .notice-badge {
    box-shadow: 0 0 0 2px #191919;
}
/* 轻微脉冲动效（吸引注意） */
#help-notice-btn.has-unread .notice-badge {
    animation: nc-bell-pulse 2s ease-in-out infinite;
}
@keyframes nc-bell-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==========================================================================
   /help/search?q=xxx 搜索结果页 (v7 2026-07-08 大厂视觉升级)
   参考: Notion / Linear / Vercel / Stripe / Apple 文档搜索设计
   ========================================================================== */

.NCSearchPage {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}
.NCSearchPageLoading {
    max-width: 880px;
    margin: 0 auto;
    padding: 96px 24px;
    text-align: center;
    color: var(--nc-text-2);
}
.NCSearchPageLoading .spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--nc-border);
    border-top-color: var(--nc-brand);
    border-radius: 50%;
    animation: nc-spin 0.8s linear infinite;
    margin-bottom: 12px;
}
@keyframes nc-spin { to { transform: rotate(360deg); } }

/* Hero: 大号搜索词回显 + 结果数 */
.NCSearchHero {
    padding: 24px 0 32px;
    border-bottom: 1px solid var(--nc-border);
    margin-bottom: 32px;
}
.NCSearchHeroBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--nc-brand)/0.08;
    background: rgba(99, 102, 241, 0.08);
    color: var(--nc-brand);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}
.NCSearchHeroTitle {
    font-size: 36px;
    font-weight: 800;
    color: var(--nc-text);
    line-height: 1.3;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.NCSearchQuery {
    color: var(--nc-brand);
    background: linear-gradient(180deg, transparent 60%, rgba(99, 102, 241, 0.18) 60%);
    padding: 0 4px;
}
.NCSearchHeroSubtitle {
    font-size: 15px;
    color: var(--nc-text-2);
    margin: 0;
    line-height: 1.6;
}
.NCSearchHeroSubtitle strong {
    color: var(--nc-brand);
    font-weight: 700;
    font-size: 18px;
}

/* 搜索结果列表 */
.NCSearchResults {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 48px;
}

/* 搜索结果卡片 */
.NCSearchCard {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-decoration: none;
    color: var(--nc-text);
    transition: all 0.15s ease;
    position: relative;
}
.NCSearchCard:hover {
    border-color: var(--nc-brand);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
}
.NCSearchCardIcon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.NCSearchCardContent {
    flex: 1;
    min-width: 0;
}
.NCSearchCardHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.NCSearchCardTitle {
    font-size: 17px;
    font-weight: 600;
    color: var(--nc-text);
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.2px;
}
.NCSearchCardBadge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.NCSearchCardSummary {
    font-size: 14px;
    color: var(--nc-text-2);
    line-height: 1.65;
    margin: 6px 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.NCSearchCardMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--nc-text-3);
}
.NCSearchCardBreadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.NCSearchCardBreadcrumb span {
    white-space: nowrap;
}
.NCSearchCardSep {
    color: var(--nc-text-4);
    margin: 0 2px;
}
.NCSearchCardArrow {
    color: var(--nc-brand);
    font-weight: 500;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.15s ease;
}
.NCSearchCard:hover .NCSearchCardArrow {
    opacity: 1;
    transform: translateX(0);
}

/* 关键词高亮 (黄色底 + 加粗) */
.NCMark {
    background: linear-gradient(180deg, transparent 55%, #FEF3C7 55%);
    color: #92400E;
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
}

/* 空状态 */
.NCSearchEmpty {
    text-align: center;
    padding: 64px 24px;
    background: #FFFFFF;
    border: 1px dashed var(--nc-border);
    border-radius: 12px;
}
.NCSearchEmptyIcon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.NCSearchEmpty h3 {
    font-size: 18px;
    color: var(--nc-text);
    margin: 0 0 8px;
    font-weight: 600;
}
.NCSearchEmpty p {
    color: var(--nc-text-2);
    font-size: 14px;
    margin: 0 0 20px;
}
.NCSearchEmptyTags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.NCSearchEmptyTags a {
    padding: 6px 14px;
    background: var(--nc-bg-2);
    color: var(--nc-text);
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.15s;
}
.NCSearchEmptyTags a:hover {
    background: var(--nc-brand);
    color: #FFFFFF;
}

/* 建议区 (填充空白) */
.NCSearchSuggestions {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--nc-border);
}
.NCSearchSuggestionsTitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--nc-text-2);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.NCSearchSuggestionsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 640px) {
    .NCSearchSuggestionsGrid { grid-template-columns: 1fr; }
}
.NCSearchSuggestionCard {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 1px solid var(--nc-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--nc-text);
    transition: all 0.15s;
}
.NCSearchSuggestionCard:hover {
    border-color: var(--nc-brand);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);
    text-decoration: none;
}
.NCSearchSuggestionIcon {
    font-size: 24px;
    flex-shrink: 0;
}
.NCSearchSuggestionContent {
    flex: 1;
    min-width: 0;
}
.NCSearchSuggestionTitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--nc-text);
    margin-bottom: 2px;
}
.NCSearchSuggestionDesc {
    font-size: 12px;
    color: var(--nc-text-3);
    line-height: 1.5;
}

/* 底部 footer */
.NCSearchFooter {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--nc-border);
    text-align: center;
}
.NCSearchFooterLink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 20px;
    background: var(--nc-bg-2);
    color: var(--nc-text);
    border-radius: 8px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.15s;
}
.NCSearchFooterLink:hover {
    background: var(--nc-brand);
    color: #FFFFFF;
}
/* ==========================================================================
   /help/ 主页 Hero 搜索框 (v10 2026-07-08 老板要求: 搜索按钮在搜索框里面)
   1. 去掉搜索框下面单独的"搜索"2 个字 (v6)
   2. 在搜索框右侧加个可见的「搜索」按钮 (v8)
   3. 放大镜 🔍 在搜索框中上下居中显示 (左右位置不变) (v8)
   4. v9: 按钮像大厂 (Notion 渐变 + 微圆角 + 多层阴影)
   5. v10: 按钮放在搜索框里面的右侧 (不是紧贴外面, 要嵌入 input 边框内)
   6. v13 2026-07-09 23:06 老板要求: 按钮还是要有「搜索」2 个字 (老板原话: 「名称也要用搜索」)
      从 v12 纯图标 (36×36) 加宽到 88×40 文字按钮, input padding-right 从 56px 加到 112px
   7. v14 2026-07-09 23:13 老板要求: 「视觉效果好、像大厂的产品」
      老板参照的是昨天 v10 (dc863b21 2026-07-08 16:02) 认可的版本:
      紫色渐变 + 8px 微圆角 + 14px 600 + 多层阴影
      v14 (本次) 不再加大加宽, 完全恢复 v10 原设计 — 这才是老板心目中的「大厂」
   8. v16 2026-07-09 23:28 老板反馈: 「搜索」按钮太小了
      仅放大 3 个参数, 其他完全保留 v10/v15 设计:
      * height:      36px → 44px
      * padding:     0 18px → 0 26px
      * font-size:   14px → 16px
      * input padding-right: 96px → 128px (让出更多空间)
      保留: 紫色渐变、8px 微圆角、白字、600 weight、阴影、动效
   9. v17 2026-07-09 23:35 老板反馈: 「按钮还是太小了, 再做大点」
      老板说 v16 还是太小. 本次动 5 个参数, 进一步放大:
      * height:       44px → 48px (接近 input 52 全高)
      * padding:      0 26px → 0 32px
      * font-size:    16px → 18px
      * border-radius: 8px → 10px (路略更圆, 跟大尺寸匹配)
      * input padding-right: 128px → 160px (让出更多空间)
      保留: 紫色渐变、白字、600 weight、阴影、动效
   10. v18 2026-07-09 23:39 老板反馈: 「再稍微小一点」
       v17 太大, 老板要稍小一档. 面积位于 v16 和 v17 中间偏 v16:
       * height:       48px → 44px (跟 v16 一致)
       * padding:      0 32px → 0 28px (v16 是 0 26, v18 是 0 28)
       * font-size:    18px → 16px (跟 v16 一致)
       * border-radius: 10px (保留 v17, 不改)
       * input padding-right: 160px → 136px (v16 是 128, v18 是 136)
       保留: 紫色渐变、白字、600 weight、阴影、动效
   11. v19 2026-07-09 23:45 老板反馈: 「再小一点」
       v18 还是大, 老板要更小. 这次缩到介于 v16 和 v18 之间偏 v16:
       * height:       44px → 42px (v16 是 44)
       * padding:      0 28px → 0 24px (v16 是 0 26, v19 是 0 24)
       * font-size:    16px → 15px (v16 是 14, v19 介于中间)
       * border-radius: 10px → 9px (缩小一档)
       * input padding-right: 136px → 120px (v16 是 128, v19 是 120)
       保留: 紫色渐变、白字、600 weight、阴影、动效
   ========================================================================== */
.NCHeroSearch input {
    /* v19 中间偏 v16: 按钮 80px + 右侧 8px + 左侧 32px = 120px
       按钮 height 42 + padding 0 24 + 文字 '搜索' 2 字 ~= 80px */
    padding: 0 120px 0 52px !important;
}
.NCHeroSearchSubmit {
    position: absolute;
    /* v19 再缩 5 参数:
       height 42 = input 52 - 5px×2 padding
       padding 0 24 = 48px 内部留空, 按钮总宽 ~= 80px */
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 42px;
    padding: 0 24px;
    border: 0;
    /* v19 border-radius 10px → 9px */
    border-radius: 9px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #6366F1 100%);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--nc-font);
    letter-spacing: 0.3px;
    box-shadow:
        0 1px 2px rgba(79, 70, 229, 0.22),
        0 2px 6px rgba(79, 70, 229, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 2;
}
.NCHeroSearchSubmit:hover {
    background: linear-gradient(135deg, #4338CA 0%, #6D28D9 50%, #4F46E5 100%);
    box-shadow:
        0 2px 4px rgba(79, 70, 229, 0.26),
        0 6px 16px rgba(79, 70, 229, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-50%) translateY(-1px);
}
.NCHeroSearchSubmit:active {
    transform: translateY(-50%) translateY(0);
    box-shadow:
        0 1px 1px rgba(79, 70, 229, 0.18),
        inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.NCHeroSearchSubmit:focus-visible {
    outline: 2px solid #A5B4FC;
    outline-offset: 2px;
}
/* 隐藏 SVG (防止 v12 残留 svg 显示) */
.NCHeroSearchSubmit svg {
    display: none;
}

/* 移动端调整 (v19 再缩, 按比例 42/36 = 1.17 倍) */
@media (max-width: 640px) {
    .NCHeroSearch input { padding: 0 96px 0 46px !important; }
    .NCHeroSearchSubmit { right: 6px; height: 38px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
    .NCHeroSearch .search-icon { left: 16px; font-size: 16px; }
}