/**
 * 站点级共用样式：设计令牌、重置、顶栏、主内容区壳层及顶栏响应式。
 * 页面专用样式请放在 home_demo.css / api_hub.css 等文件中。
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --text: #121826;
    --muted: #6b7280;
    --line: #e5e7eb;
    --panel: #ffffff;
    --soft: #f8fafc;
    --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    --max-w: 85%;
    --header-w: 90%;
    --card-w: 80%;
    --accent: #4f6df6;
    /* 首页上传区 / 链接区共用 */
    --landing-dash: #d8deea;
    --landing-dash-hover: #a5b4fc;
    --landing-dash-active: #7da2ff;
    --landing-bg-glow: radial-gradient(circle at top, rgba(191, 219, 254, 0.26), transparent 44%);
    --landing-inset: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --field-border: #d6deed;
    --field-border-focus: #a5b4fc;
    --focus-ring: 0 0 0 4px rgba(79, 109, 246, 0.08);
    --home-mode-trigger-width: 200px;
    --home-mode-trigger-padding-x: 16px;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif;
    --font-mono: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "Source Han Mono SC", "Microsoft YaHei Mono", "WenQuanYi Micro Hei Mono", monospace;
    /* legacy aliases（合并自旧 demo 样式） */
    --border: var(--line);
    --bg: var(--panel);
    --bg-soft: var(--soft);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: #f7f9fc;
    background-image: linear-gradient(180deg, #fbfdff 0%, #f7f9fc 100%);
    background-repeat: no-repeat;
    background-size: 100% 100vh;
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
}

[hidden] {
    display: none !important;
}

.home-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(18px);
}

.home-topbar-inner {
    max-width: var(--header-w);
    margin: 0 auto;
    min-height: 72px;
    padding: 0 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 28px;
    font-weight: 800;
}

.brand-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.brand-name {
    font-size: 17px;
    font-weight: 800;
}

.home-nav-right {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.nav-link {
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
    padding-block: 10px;
    padding-inline: 0;
    border-radius: 999px;
    transition: color .2s, transform .2s, opacity .2s;
}

.nav-link:hover {
    color: #1d4ed8;
    transform: translateY(-1px);
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.lang-btn {
    border: 0;
    background: transparent;
    color: #64748b;
    min-width: 42px;
    height: 32px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}

.lang-btn:hover {
    color: #334155;
    transform: translateY(-1px);
}

.lang-btn.active {
    background: #fff;
    color: #1e3a8a;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.home-main {
    max-width: var(--max-w);
    min-height: calc(100vh - 72px);
    margin: 0 auto;
    padding-block: 28px;
    padding-inline: 24px;
}

.home-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    padding: 20px 24px 28px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.home-footer a {
    color: inherit;
    text-decoration: none;
}

.home-footer a:hover {
    color: var(--text);
}

@media (max-width: 960px) {
    .home-topbar-inner {
        padding: 0 20px;
    }

    .home-main {
        padding-block: 22px;
        padding-inline: 18px;
    }
}

@media (max-width: 720px) {
    .home-topbar-inner {
        flex-wrap: wrap;
        justify-content: center;
        padding-block: 12px;
        padding-inline: 18px;
    }

    .home-nav-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}