/* ============================================================
   YUEQI 2026 — tokens.css
   设计令牌：变量 / 重置 / 基础排版（两端共用）
   ============================================================ */

:root {
    --bg: #f2f2ee;
    --ink: #17191c;
    --muted: #7d8288;
    --line: rgba(20, 24, 28, .14);
    --soft: rgba(255, 255, 255, .56);
    --accent: #52657d;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --transition-duration: 780ms;
    --transition-ease: cubic-bezier(.16, 1, .3, 1);
    --header-h: 72px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body { overflow-x: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: inherit; }

/* 颗粒噪点（两端共用，纯 SVG 手绘纹理） */
#grain {
    position: fixed; inset: 0;
    z-index: 300;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* 基础组件 */
.eyebrow {
    font-size: 9px;
    letter-spacing: .25em;
    color: #777c80;
}

.primary {
    pointer-events: auto;
    border: 1px solid rgba(24, 29, 34, .25);
    background: rgba(255, 255, 255, .55);
    border-radius: 999px;
    padding: 8px 9px 8px 20px;
    display: inline-flex;
    align-items: center;
    gap: 28px;
    box-shadow: 0 14px 40px rgba(40, 45, 50, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform .5s var(--ease), background .35s, border-color .35s, opacity .3s;
    will-change: transform;
}

.primary .ico {
    width: 31px; height: 31px;
    border-radius: 50%;
    background: #1d2125;
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
}

.primary .ico svg { width: 14px; height: 14px; display: block; }

/* 表单基础 */
label > span {
    display: block;
    font-size: 9px;
    letter-spacing: .15em;
    color: #858a8e;
    margin-bottom: 9px;
}

.req {
    font-style: normal;
    font-weight: 400;
    color: #9a6a5e;
    margin-left: 6px;
    font-size: 8px;
    letter-spacing: .08em;
}

input, select, textarea {
    border: 0;
    background: transparent;
    outline: 0;
    width: 100%;
}

input::placeholder, textarea::placeholder { color: #b7b9b8; }

/* 桌面顶部进度条用到的进度 */
.progress i { display: block; height: 1px; background: rgba(30, 35, 40, .12); }
.progress i b { display: block; height: 1px; background: #30363b; transition: width .7s var(--ease); }

/* 无障碍：减少动态效果 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* 跨文档视图转场：同源页面间导航时由浏览器做平滑过渡（不支持的浏览器自动忽略） */
@view-transition {
    navigation: auto;
}