/* ==========================================================================
   录音啦 · macOS 风格设计系统
   --------------------------------------------------------------------------
   自研单文件设计系统，替代 app.min.css + bootstrap + font-awesome + owl + magnific。
   仅依赖系统字体与内联 SVG，无外部资源。
   类名约定：
     - 新组件用 BEM 风格（.site-header__nav / .btn--primary / .field__input）
     - 老页面 JS 依赖的类名一律保留并在此重新定义：
       .form-group .field-error .has-error .input-area .subtitle .register-text
       .account-input-wrap .send-code-btn .submit-row .main-btn .main .cupon
       .table-box .transaction-table .record-list .list-box .box-item .item-left
       .item-right-text .item-right .record-toolbar .list-empty .record-empty
       .status-done .status-queue .status-row-queue .checkoutt-box .cart-box
       .edit-toolbar .edit-actions .edit-hint #text-area .highlight .editable
       .search-highlight #audio-player
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
    /* 颜色 — 参照 Apple 系统色（浅色模式） */
    --c-bg:          #f5f5f7;
    --c-bg-alt:      #fbfbfd;
    --c-panel:       #ffffff;
    --c-panel-soft:  #fbfbfd;
    --c-glass:       rgba(251, 251, 253, .78);
    --c-glass-solid: rgba(255, 255, 255, .92);
    --c-text:        #1d1d1f;
    --c-text-2:      #6e6e73;
    --c-text-3:      #86868b;
    --c-text-inv:    #ffffff;
    --c-line:        rgba(0, 0, 0, .10);
    --c-line-soft:   rgba(0, 0, 0, .055);
    --c-hairline:    #e5e5ea;
    --c-fill:        rgba(0, 0, 0, .05);
    --c-fill-strong: rgba(0, 0, 0, .09);

    --c-accent:      #0071e3;
    --c-accent-hi:   #0077ed;
    --c-accent-lo:   #0062c4;
    --c-accent-soft: rgba(0, 113, 227, .10);
    --c-accent-ring: rgba(0, 113, 227, .22);

    --c-green:       #1d8a4e;
    --c-green-soft:  rgba(52, 199, 89, .14);
    --c-orange:      #b26a00;
    --c-orange-soft: rgba(255, 149, 0, .16);
    --c-red:         #d70015;
    --c-red-soft:    rgba(255, 59, 48, .12);

    /* 圆角 */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 980px;

    /* 阴影 */
    --sh-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 6px rgba(0, 0, 0, .05);
    --sh-md: 0 2px 6px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .07);
    --sh-lg: 0 4px 14px rgba(0, 0, 0, .06), 0 24px 56px rgba(0, 0, 0, .11);
    --sh-xl: 0 8px 24px rgba(0, 0, 0, .08), 0 40px 90px rgba(0, 0, 0, .16);

    /* 尺寸 */
    --header-h: 60px;
    --wrap: 1120px;
    --wrap-narrow: 880px;

    /* 动效 */
    --ease: cubic-bezier(.32, .72, 0, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .16s;
    --t: .24s;
    --t-slow: .42s;
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro SC",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "tnum" 1;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -.018em; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--c-accent); text-decoration: none; transition: color var(--t-fast) var(--ease-soft); }
a:hover { color: var(--c-accent-hi); }
button { font: inherit; color: inherit; }
input, textarea, select, button { font-family: inherit; }
picture { display: contents; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-line-soft); margin: 32px 0; }

::selection { background: var(--c-accent-ring); }

/* 焦点可见性 —— 兼顾键盘可用性与鼠标体验 */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 滚动条 —— macOS 细条 */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border: 3px solid transparent;
    border-radius: 10px;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .32); background-clip: content-box; }

/* ---------- 3. 布局 ---------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.page-main { padding-bottom: 64px; }

.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }

.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section-head__title { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.024em; margin-bottom: 12px; }
.section-head__desc { font-size: 17px; color: var(--c-text-2); line-height: 1.65; }

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 999;
    padding: 10px 18px; border-radius: var(--r-sm);
    background: var(--c-accent); color: #fff; font-size: 14px;
    transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- 4. 顶栏 ---------- */
.site-header {
    position: sticky; top: 0; z-index: 200;
    height: var(--header-h);
    background: var(--c-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--c-line-soft);
    transition: box-shadow var(--t) var(--ease-soft), background var(--t) var(--ease-soft);
}
.site-header.is-scrolled {
    background: var(--c-glass-solid);
    box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
}
.site-header__inner {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* 品牌 */
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand img { height: 28px; width: auto; }
.brand__name {
    font-size: 17px; font-weight: 600; letter-spacing: -.02em;
    color: var(--c-text); white-space: nowrap;
}
.brand:hover { color: var(--c-text); }
.brand:hover .brand__name { color: var(--c-accent); }

/* 桌面导航 */
.site-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; justify-content: center; }
.site-nav__link {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    border-radius: var(--r-pill);
    font-size: 14.5px; font-weight: 500; color: var(--c-text-2);
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.site-nav__link:hover { color: var(--c-text); background: var(--c-fill); }
.site-nav__link.is-current { color: var(--c-text); background: var(--c-fill); font-weight: 600; }

/* 右侧操作区 */
.site-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* 汉堡按钮 */
.nav-toggler {
    display: none;
    width: 38px; height: 38px; padding: 0;
    border: 0; border-radius: var(--r-sm);
    background: var(--c-fill);
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast) var(--ease-soft);
}
.nav-toggler:hover { background: var(--c-fill-strong); }
.nav-toggler__bars { position: absolute; inset: 0; margin: auto; width: 17px; height: 11px; }
.nav-toggler__bars span {
    position: absolute; left: 0; width: 100%; height: 1.8px; border-radius: 2px;
    background: var(--c-text);
    transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggler__bars span:nth-child(1) { top: 0; }
.nav-toggler__bars span:nth-child(2) { top: 4.6px; }
.nav-toggler__bars span:nth-child(3) { top: 9.2px; }
.nav-toggler[aria-expanded="true"] .nav-toggler__bars span:nth-child(1) { transform: translateY(4.6px) rotate(45deg); }
.nav-toggler[aria-expanded="true"] .nav-toggler__bars span:nth-child(2) { opacity: 0; }
.nav-toggler[aria-expanded="true"] .nav-toggler__bars span:nth-child(3) { transform: translateY(-4.6px) rotate(-45deg); }

/* 移动端抽屉
   注意：关闭态必须同时是 display:none / visibility:hidden / pointer-events:none。
   仅靠 opacity:0 会让它继续参与命中测试，在顶栏下方形成一条不可见的满宽遮罩，
   把下方表单输入框的点击全部吃掉（曾导致 vip.php 移动端用户名无法点击）。
   开启由 JS 设置 inline display:block + .is-open，故此处不要用媒体查询改成 block。 */
.nav-drawer {
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 190;
    padding: 12px 0 20px;
    background: var(--c-glass-solid);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--c-line-soft);
    box-shadow: var(--sh-md);
    display: none;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* visibility 作为离散属性参与过渡：关闭时会在动画结束后才隐藏，淡出效果得以保留 */
    transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease),
                visibility var(--t) linear;
}
.nav-drawer.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}
.nav-drawer__list { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer__link {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 46px; padding: 0 14px; border-radius: var(--r-sm);
    font-size: 16px; font-weight: 500; color: var(--c-text);
}
.nav-drawer__link:hover { background: var(--c-fill); color: var(--c-text); }
.nav-drawer__link.is-current { background: var(--c-accent-soft); color: var(--c-accent); }
.nav-drawer__link svg { opacity: .35; }
.nav-drawer__foot { display: flex; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--c-line-soft); }

/* ---------- 4.5 语言切换器 ---------- */
.lang-switch { position: relative; flex: 0 0 auto; }

.lang-switch__btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 11px;
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-pill);
    background: var(--c-panel);
    box-shadow: var(--sh-xs);
    color: var(--c-text-2);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft),
                border-color var(--t-fast) var(--ease-soft);
}
.lang-switch__btn:hover { color: var(--c-text); border-color: var(--c-line); }
.lang-switch.is-open .lang-switch__btn {
    color: var(--c-accent); border-color: var(--c-accent-ring);
    background: var(--c-accent-soft);
}
.lang-switch__code {
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    line-height: 1; min-width: 12px; text-align: center;
}

.lang-switch__menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 320;
    min-width: 190px; max-height: 62vh; overflow-y: auto;
    padding: 6px;
    background: var(--c-glass-solid);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xl);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease);
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; transform: none; }

.lang-switch__item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 36px; padding: 0 10px;
    border: 0; border-radius: var(--r-xs);
    background: transparent; color: var(--c-text);
    font-size: 14px; text-align: left; cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.lang-switch__item:hover { background: var(--c-fill); }
.lang-switch__item.is-selected { color: var(--c-accent); font-weight: 600; }
.lang-switch__tick {
    flex: 0 0 13px; width: 13px; height: 13px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; color: var(--c-accent);
}
.lang-switch__item.is-selected .lang-switch__tick { opacity: 1; }
.lang-switch__name { flex: 1 1 auto; }

/* ---------- 5. 按钮 ---------- */.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 20px;
    border: 1px solid transparent; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 500; white-space: nowrap;
    cursor: pointer; user-select: none;
    transition: background var(--t-fast) var(--ease-soft),
                box-shadow var(--t-fast) var(--ease-soft),
                transform var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft);
}
.btn svg { flex: 0 0 auto; }
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--c-accent); color: var(--c-text-inv); box-shadow: var(--sh-xs); }
.btn--primary:hover { background: var(--c-accent-hi); color: var(--c-text-inv); box-shadow: 0 2px 10px rgba(0, 113, 227, .28); }
.btn--primary:active { background: var(--c-accent-lo); }

.btn--secondary { background: var(--c-fill); color: var(--c-text); }
.btn--secondary:hover { background: var(--c-fill-strong); color: var(--c-text); }

.btn--outline { background: var(--c-panel); color: var(--c-text); border-color: var(--c-line); box-shadow: var(--sh-xs); }
.btn--outline:hover { background: var(--c-panel); border-color: rgba(0, 0, 0, .2); color: var(--c-text); }

.btn--ghost { background: transparent; color: var(--c-accent); padding: 0 12px; }
.btn--ghost:hover { background: var(--c-accent-soft); color: var(--c-accent); }

.btn--danger { background: var(--c-red); color: #fff; }
.btn--danger:hover { background: #e0342a; color: #fff; }

.btn--sm { height: 34px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 48px; padding: 0 28px; font-size: 16.5px; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-loading, .btn.is-disabled {
    opacity: .5; pointer-events: none; cursor: default; box-shadow: none;
}
.btn.is-loading::after,
.main-btn.is-loading::after,
.is-loading::after {
    content: ""; display: inline-block;
    width: 13px; height: 13px; margin-left: 2px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 老类名兼容：.main-btn（record.php 的 JS 会生成） */
.main-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 14px;
    border: 0; border-radius: var(--r-pill);
    background: var(--c-fill); color: var(--c-text);
    font-size: 13px; font-weight: 500; white-space: nowrap;
    cursor: pointer; text-decoration: none;
    transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.main-btn:hover { background: var(--c-fill-strong); color: var(--c-text); }
.main-btn.purchase { background: var(--c-accent-soft); color: var(--c-accent); }
.main-btn.purchase:hover { background: var(--c-accent); color: #fff; }
.main-btn.delete-file { background: transparent; color: var(--c-text-2); }
.main-btn.delete-file:hover { background: var(--c-red-soft); color: var(--c-red); }

/* 老类名兼容：.main（record.php 工具栏按钮） */
.main {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 18px;
    border: 1px solid var(--c-line); border-radius: var(--r-pill);
    background: var(--c-panel); color: var(--c-text);
    font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft);
}
.main:hover { background: var(--c-fill); border-color: transparent; }
#delete-all-button.main { color: var(--c-red); }
#delete-all-button.main:hover { background: var(--c-red-soft); border-color: transparent; }

/* ---------- 6. 表单 ---------- */
.form-group { margin-bottom: 18px; }
.form-group > label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px; font-weight: 500; color: var(--c-text-2);
    letter-spacing: -.005em;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="search"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%; height: 46px; padding: 0 14px;
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    background: var(--c-panel); color: var(--c-text);
    font-size: 15px; line-height: 1.4;
    transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft),
                background var(--t-fast) var(--ease-soft);
    -webkit-appearance: none; appearance: none;
}
.form-group textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #a6a6ab; }
.form-group input:hover,
.form-group textarea:hover { border-color: rgba(0, 0, 0, .18); }
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3.5px var(--c-accent-ring);
}
.form-group input[type="password"] { letter-spacing: .04em; }

/* 校验态（JS 会加 .has-error 并写入 .field-error） */
.form-group .field-error {
    display: block;
    margin-top: 7px;
    font-size: 12.5px; line-height: 1.5; color: var(--c-red);
}
.form-group.has-error input,
.form-group.has-error textarea {
    border-color: var(--c-red) !important;
    background: #fff8f7;
}
.form-group.has-error input:focus { box-shadow: 0 0 0 3.5px var(--c-red-soft); }
.form-group .field-tip { display: block; margin-top: 6px; font-size: 12.5px; color: var(--c-text-3); }

/* 账户 + 发送验证码 */
.account-input-wrap { display: flex; align-items: stretch; gap: 10px; }
.account-input-wrap input { flex: 1 1 auto; min-width: 0; }
.account-input-wrap .send-code-btn {
    flex: 0 0 auto; height: 46px; padding: 0 18px;
    border: 0; border-radius: var(--r-sm);
    background: var(--c-accent-soft); color: var(--c-accent);
    font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.account-input-wrap .send-code-btn:hover { background: var(--c-accent); color: #fff; }
.account-input-wrap .send-code-btn[disabled] { opacity: .55; pointer-events: none; }

.submit-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.submit-row .main-btn,
.submit-row .btn {
    height: 46px; padding: 0 30px; border-radius: var(--r-pill);
    background: var(--c-accent); color: #fff; font-size: 16px; font-weight: 500;
}
.submit-row .main-btn:hover,
.submit-row .btn:hover { background: var(--c-accent-hi); }

/* ---------- 7. 窗口卡片（macOS 窗口 chrome） ---------- */
.window {
    background: var(--c-panel);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.window__bar {
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 16px;
    background: var(--c-panel-soft);
    border-bottom: 1px solid var(--c-line-soft);
}
.window__title {
    flex: 1 1 auto; text-align: center;
    font-size: 13px; font-weight: 500; color: var(--c-text-3);
    letter-spacing: -.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.window__body { padding: 28px; }

/* 红黄绿信号灯 */
.dots { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dots i {
    display: block; width: 12px; height: 12px; border-radius: 50%;
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12);
}
.dots i:nth-child(1) { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }

/* ---------- 8. 首页 Hero ---------- */
.hero { padding: 76px 0 56px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
    content: ""; position: absolute; inset: -30% -10% auto -10%; height: 620px;
    background:
        radial-gradient(46% 52% at 26% 32%, rgba(0, 113, 227, .10), transparent 62%),
        radial-gradient(44% 50% at 76% 26%, rgba(120, 92, 255, .10), transparent 64%);
    pointer-events: none;
}
.hero > * { position: relative; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 14px; margin-bottom: 20px;
    border-radius: var(--r-pill);
    background: var(--c-panel); border: 1px solid var(--c-line-soft);
    box-shadow: var(--sh-xs);
    font-size: 13px; font-weight: 500; color: var(--c-text-2);
}
.hero__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 3px var(--c-green-soft); }
.hero__title {
    font-size: clamp(30px, 5.2vw, 54px);
    font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
    margin-bottom: 18px;
}
.hero__title em { font-style: normal; background: linear-gradient(96deg, #0071e3, #7a5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__desc {
    max-width: 620px; margin: 0 auto 34px;
    font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.62; color: var(--c-text-2);
}

/* ---------- 9. 上传窗口 ---------- */
.uploader { max-width: 720px; margin: 0 auto; text-align: left; }
.uploader__body { padding: 22px; }

.dropzone {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    border: 1.5px dashed rgba(0, 0, 0, .16);
    border-radius: var(--r-md);
    background: var(--c-panel-soft);
    text-align: center;
    transition: border-color var(--t) var(--ease-soft), background var(--t) var(--ease-soft), transform var(--t) var(--ease-soft);
}
.dropzone.is-dragover {
    border-color: var(--c-accent); border-style: solid;
    background: var(--c-accent-soft);
    transform: scale(1.008);
}
.dropzone__icon {
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: var(--r-md);
    background: var(--c-panel); border: 1px solid var(--c-line-soft);
    box-shadow: var(--sh-sm);
    color: var(--c-accent);
}
.dropzone__title { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.dropzone__hint { font-size: 13px; color: var(--c-text-3); line-height: 1.6; }
.dropzone__actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.dropzone__tip { margin-top: 14px; font-size: 12.5px; color: var(--c-text-3); line-height: 1.65; }

/* 上传器的隐藏 input */
.visually-hidden,
.uploader input[type="file"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 进度条 */
.progress { margin-top: 18px; display: none; }
.progress.is-active { display: block; }
.progress__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.progress__label { font-size: 13.5px; font-weight: 500; color: var(--c-text); }
.progress__pct { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--c-text-2); }
.progress__track {
    position: relative; height: 6px; border-radius: 4px;
    background: rgba(0, 0, 0, .08); overflow: hidden;
}
.progress__bar {
    position: absolute; inset: 0 auto 0 0; width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #0071e3, #4aa3ff);
    transition: width .3s var(--ease-soft);
}
.progress.is-indeterminate .progress__bar {
    width: 34% !important;
    animation: indeterminate 1.25s var(--ease-soft) infinite;
}
@keyframes indeterminate {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

/* ---------- 10. 特性卡片 ---------- */
.feature-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.feature {
    padding: 26px 22px;
    background: var(--c-panel);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease-soft), border-color var(--t) var(--ease-soft);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--c-line); }
.feature__icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-bottom: 16px;
    border-radius: var(--r-sm);
    background: var(--c-accent-soft); color: var(--c-accent);
}
.feature__icon img { width: 26px; height: 26px; object-fit: contain; }
.feature__title { font-size: 16.5px; margin-bottom: 8px; }
.feature__desc { font-size: 14px; line-height: 1.65; color: var(--c-text-2); }

/* ---------- 11. 合作伙伴 跑马灯 ---------- */
.marquee {
    position: relative; overflow: hidden;
    padding: 26px 0;
    background: var(--c-panel);
    border-top: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; justify-content: center; height: 40px; opacity: .5; transition: opacity var(--t) var(--ease-soft); }
.marquee__item:hover { opacity: 1; }
.marquee__item img { max-height: 34px; width: auto; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 12. 演示视频 ---------- */
.demo-video { position: relative; max-width: 820px; margin: 52px auto 0; }
.demo-video img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.video-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: var(--sh-md);
    color: var(--c-accent);
    transition: transform var(--t) var(--ease), background var(--t-fast) var(--ease-soft);
}
.video-play:hover { transform: translate(-50%, -50%) scale(1.08); background: #fff; color: var(--c-accent); }
.video-play svg { margin-left: 3px; }

/* ---------- 13. 页面标题区 ---------- */
.page-hero {
    padding: 52px 0 30px;
    background: linear-gradient(180deg, var(--c-bg-alt), var(--c-bg) 82%);
    border-bottom: 1px solid var(--c-line-soft);
}
.page-hero__title { font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -.026em; margin-bottom: 10px; }
.page-hero__desc { font-size: 15.5px; color: var(--c-text-2); max-width: 640px; }
.crumbs { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--c-text-3); }
.crumbs a { color: var(--c-text-3); }
.crumbs a:hover { color: var(--c-accent); }
.crumbs svg { opacity: .5; }

/* ---------- 14. 关于页 ---------- */
.about-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.about-lead__img img {
    width: 100%; height: auto; border-radius: var(--r-lg);
    box-shadow: var(--sh-md); border: 1px solid var(--c-line-soft);
}
.about-lead__title { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 16px; letter-spacing: -.024em; }
.about-lead__text { font-size: 16px; line-height: 1.8; color: var(--c-text-2); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.site-card {
    padding: 26px 22px;
    background: var(--c-panel); border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm); text-align: center;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease-soft);
}
.site-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.site-card__img {
    width: 76px; height: 76px; margin: 0 auto 16px;
    border-radius: 50%; overflow: hidden; background: var(--c-bg);
    box-shadow: 0 0 0 1px var(--c-line-soft);
}
.site-card__img img { width: 100%; height: 100%; object-fit: cover; }
.site-card__title { font-size: 17px; margin-bottom: 6px; }
.site-card__meta { font-size: 14px; color: var(--c-text-2); }

.quote {
    display: flex; flex-direction: column; gap: 16px;
    padding: 26px 24px;
    background: var(--c-panel); border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.quote__text { font-size: 15px; line-height: 1.75; color: var(--c-text-2); }
.quote__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--c-bg); flex: 0 0 auto; }
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote__name { font-size: 14.5px; font-weight: 600; }
.quote__role { font-size: 12.5px; color: var(--c-text-3); }
.stars { display: flex; gap: 2px; color: #f5a623; }

/* ---------- 15. 记录列表 ---------- */
.cart-box { padding: 36px 0 0; }

.table-box {
    background: var(--c-panel);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}
/* 用类名而非 jQuery show/hide 控制显隐，避免行内 display 覆盖断点规则 */
.table-box.is-hidden { display: none; }
.transaction-table { width: 100%; }
.transaction-table thead th {
    padding: 13px 18px;
    background: var(--c-panel-soft);
    border-bottom: 1px solid var(--c-line-soft);
    font-size: 12.5px; font-weight: 600; color: var(--c-text-3);
    text-align: left; letter-spacing: .01em; white-space: nowrap;
}
.transaction-table tbody td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--c-line-soft);
    font-size: 14.5px; color: var(--c-text); vertical-align: middle;
}
.transaction-table tbody tr:last-child td { border-bottom: 0; }
.transaction-table tbody tr { transition: background var(--t-fast) var(--ease-soft); }
.transaction-table tbody tr:hover { background: rgba(0, 0, 0, .022); }
.transaction-table tbody tr.status-row-queue { background: rgba(255, 149, 0, .045); }
.transaction-table .text { color: var(--c-text); }
.transaction-table td a.text { font-weight: 500; }
.transaction-table td a.text:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.transaction-table td:last-child { text-align: right; white-space: nowrap; }
.transaction-table td:last-child .main-btn + .main-btn { margin-left: 6px; }

/* 状态徽标 —— 颜色规则必须比 .transaction-table .text / .item-right-text 更具体，
   否则会被表格通用文字色覆盖（基础规则只负责布局） */
.status-done, .status-queue {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 11px; border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 500; line-height: 1;
}
.status-done::before, .status-queue::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.transaction-table .status-done, .list-box .status-done {
    color: var(--c-green); background: var(--c-green-soft);
}
.transaction-table .status-queue, .list-box .status-queue {
    color: var(--c-orange); background: var(--c-orange-soft);
}
.transaction-table .status-queue::before, .list-box .status-queue::before {
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* 移动端卡片列表（默认隐藏，窄屏显示） */
.record-list { display: none; flex-direction: column; gap: 12px; }
.list-box {
    padding: 16px 18px;
    background: var(--c-panel);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
}
.box-item { display: flex; gap: 12px; padding: 6px 0; font-size: 14px; }
.box-item + .box-item { border-top: 1px solid var(--c-line-soft); }
.item-left { flex: 0 0 76px; color: var(--c-text-3); font-size: 13px; }
.item-right-text { flex: 1 1 auto; min-width: 0; word-break: break-all; color: var(--c-text); }
.item-right { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }

/* 工具栏 */
.record-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.record-toolbar input.cupon {
    flex: 1 1 260px; min-width: 0; height: 40px; padding: 0 16px;
    border: 1px solid var(--c-line); border-radius: var(--r-pill);
    background: var(--c-panel); color: var(--c-text); font-size: 14.5px;
    -webkit-appearance: none; appearance: none;
    transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
.record-toolbar input.cupon::placeholder { color: #a6a6ab; }
.record-toolbar input.cupon:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3.5px var(--c-accent-ring); }

/* 空状态 */
.record-empty { margin-top: 22px; }
.list-empty {
    padding: 56px 20px;
    background: var(--c-panel);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    text-align: center;
    font-size: 15px; line-height: 1.8; color: var(--c-text-2);
}
.list-empty a { font-weight: 500; }

/* ---------- 16. 识别结果编辑页 ---------- */
#text-area {
    min-height: 340px; max-height: 62vh; overflow-y: auto;
    padding: 20px 22px;
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font-size: 15.5px; line-height: 2; color: var(--c-text);
    outline: none;
    transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
#text-area:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3.5px var(--c-accent-ring); }
#text-area .highlight { cursor: pointer; padding: 1px 2px; border-radius: 4px; transition: background var(--t-fast) var(--ease-soft); }
#text-area .highlight:hover { background: var(--c-accent-soft); }
#text-area .editable { color: var(--c-accent); background: var(--c-accent-soft); }
#text-area .search-highlight { color: #8a5a00; background: rgba(255, 214, 10, .38); border-radius: 4px; }
/* 编辑区内的占位/错误提示不应再套一层卡片边框 */
#text-area .list-empty {
    padding: 16px 0; border: 0; background: transparent;
    box-shadow: none; text-align: left; font-size: 14.5px;
}

.edit-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
#search-box {
    flex: 1 1 260px; min-width: 0; height: 40px; padding: 0 16px;
    border: 1px solid var(--c-line); border-radius: var(--r-pill);
    background: var(--c-panel); color: var(--c-text); font-size: 14.5px;
    -webkit-appearance: none; appearance: none;
}
#search-box::placeholder { color: #a6a6ab; }
#search-box:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3.5px var(--c-accent-ring); }

#audio-player { width: 100%; margin-top: 18px; height: 44px; border-radius: var(--r-md); }
.edit-hint { margin-top: 12px; font-size: 13px; color: var(--c-text-3); }
.edit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- 17. 账户 / 表单页（登录·注册·重置·激活） ---------- */
.auth-main { padding: 56px 0 72px; display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 470px; }
.auth-card .window__body { padding: 30px 32px 32px; }

.input-area { }
.input-area .subtitle {
    margin: 0 0 22px;
    font-size: 17px; font-weight: 600; line-height: 1.5;
    color: var(--c-text); letter-spacing: -.012em;
}
.input-area .subtitle.is-note {
    padding: 12px 14px; margin-bottom: 18px;
    background: var(--c-accent-soft);
    border-radius: var(--r-sm);
    font-size: 13.5px; font-weight: 400; color: var(--c-text-2);
    line-height: 1.7;
}
.register-text {
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--c-line-soft);
    font-size: 13.5px; line-height: 1.9; color: var(--c-text-3);
    text-align: center;
}
.register-text a { display: inline-block; }
.register-text .text { margin-top: 8px; font-size: 12.5px; line-height: 1.8; color: var(--c-text-3); }

.activate-card-img {
    display: block; width: 100%; height: auto;
    margin: 0 0 22px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-line-soft);
    box-shadow: var(--sh-sm);
}

/* 页脚链接组 */
.foot-links { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.foot-links a { font-size: 14px; color: var(--c-text-2); }
.foot-links a:hover { color: var(--c-accent); }

/* ---------- 18. 页脚 ---------- */
.site-footer {
    background: var(--c-panel);
    border-top: 1px solid var(--c-line-soft);
    padding: 52px 0 0;
}
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.site-footer__brand img { height: 28px; width: auto; margin-bottom: 14px; }
.site-footer__desc { font-size: 13.5px; line-height: 1.75; color: var(--c-text-3); max-width: 300px; }
.site-footer__title { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.site-footer__list { display: flex; flex-direction: column; gap: 10px; }
.site-footer__list a { font-size: 13.5px; color: var(--c-text-2); }
.site-footer__list a:hover { color: var(--c-accent); }

.copyright {
    margin-top: 44px; padding: 18px 0;
    border-top: 1px solid var(--c-line-soft);
    text-align: center;
    font-size: 13px; color: var(--c-text-3);
}
.copyright p { line-height: 1.8; }
.copyright a { color: var(--c-text-3); }
.copyright a:hover { color: var(--c-accent); }

/* 回到顶部 */
.back-to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 150;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease), visibility var(--t);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top a {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--c-glass-solid);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--c-line-soft);
    box-shadow: var(--sh-md);
    color: var(--c-text-2);
}
.back-to-top a:hover { color: var(--c-accent); transform: translateY(-2px); }

/* ---------- 19. Toast ---------- */
.toast-host {
    position: fixed; z-index: 400;
    left: 50%; bottom: 26px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: 11px;
    width: 100%; padding: 14px 16px;
    background: var(--c-glass-solid);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    font-size: 14.5px; line-height: 1.55; color: var(--c-text);
    pointer-events: auto;
    animation: toastIn .32s var(--ease) both;
}
.toast.is-out { animation: toastOut .22s var(--ease-soft) both; }
.toast__icon { flex: 0 0 auto; margin-top: 1px; }
.toast--success .toast__icon { color: var(--c-green); }
.toast--error .toast__icon { color: var(--c-red); }
.toast--warn .toast__icon { color: #d98b00; }
.toast--info .toast__icon { color: var(--c-accent); }
.toast__text { flex: 1 1 auto; word-break: break-word; }
.toast__close {
    flex: 0 0 auto; width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--c-text-3); cursor: pointer; line-height: 1;
    transition: background var(--t-fast) var(--ease-soft);
}
.toast__close:hover { background: var(--c-fill); color: var(--c-text); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- 20. 对话框 ---------- */
.dialog-mask {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: fadeIn .2s var(--ease-soft) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.dialog {
    width: 100%; max-width: 340px;
    background: var(--c-glass-solid);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    overflow: hidden;
    animation: dialogIn .3s var(--ease) both;
    text-align: center;
}
@keyframes dialogIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.dialog__body { padding: 24px 22px 20px; }
.dialog__icon {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin: 0 auto 14px;
    border-radius: 50%; background: var(--c-red-soft); color: var(--c-red);
}
.dialog__title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.dialog__text { font-size: 13.5px; line-height: 1.65; color: var(--c-text-2); word-break: break-word; }
.dialog__foot { display: flex; border-top: 1px solid var(--c-line-soft); }
.dialog__btn {
    flex: 1 1 0; height: 48px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 15.5px; color: var(--c-accent); font-weight: 400;
    transition: background var(--t-fast) var(--ease-soft);
}
.dialog__btn:hover { background: rgba(0, 0, 0, .035); }
.dialog__btn--ok { font-weight: 600; }
.dialog__btn--danger { color: var(--c-red); font-weight: 600; }
.dialog__btn + .dialog__btn { border-left: 1px solid var(--c-line-soft); }

/* ---------- 21. 视频弹窗 ---------- */
.video-modal {
    position: fixed; inset: 0; z-index: 520;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: fadeIn .22s var(--ease-soft) both;
}
.video-modal__inner {
    width: 100%; max-width: 940px;
    border-radius: var(--r-lg); overflow: hidden;
    background: #000; box-shadow: var(--sh-xl);
    animation: dialogIn .34s var(--ease) both;
}
.video-modal video, .video-modal iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.video-modal__close {
    position: absolute; right: 22px; top: 22px;
    width: 40px; height: 40px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .16); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast) var(--ease-soft);
}
.video-modal__close:hover { background: rgba(255, 255, 255, .3); }

/* ---------- 22. 通用工具类 ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.hide-element { display: none !important; }
/* hidden 属性必须能压过 .btn 的 display —— 否则上传/暂停按钮会被强制显示 */
[hidden] { display: none !important; }

/* 卡片容器（通用面板） */
.panel {
    background: var(--c-panel);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 24px;
}

/* 加载遮罩（页面级） */
.page-loading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 64px 20px;
    color: var(--c-text-3); font-size: 14.5px;
}
.page-loading::before {
    content: ""; width: 16px; height: 16px;
    border: 2px solid var(--c-line); border-top-color: var(--c-accent);
    border-radius: 50%; animation: spin .8s linear infinite;
}

/* 骨架屏 */
.skeleton {
    background: linear-gradient(90deg, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .08) 37%, rgba(0, 0, 0, .05) 63%);
    background-size: 400% 100%;
    border-radius: 6px;
    animation: skeleton 1.4s ease infinite;
}
@keyframes skeleton { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---------- 23. 响应式 ---------- */
@media (max-width: 1024px) {
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .about-lead { grid-template-columns: 1fr; gap: 28px; }
    /* 登录态导航有 5 项，中等屏收窄内边距避免换行 */
    .site-nav__link { padding: 0 10px; font-size: 14px; }
}

@media (max-width: 860px) {
    :root { --header-h: 56px; }
    .wrap { padding: 0 18px; }
    .site-nav { display: none; }
    .nav-toggler { display: block; }
    /* 抽屉的显示/隐藏完全交给 JS（inline display + .is-open），此处不得设为 block */

    .hero { padding: 44px 0 34px; }
    .section { padding: 48px 0; }
    .uploader__body { padding: 16px; }
    .dropzone { padding: 30px 18px; }

    .table-box { display: none; }
    .record-list { display: flex; }

    .grid-3 { grid-template-columns: 1fr; }
    .edit-toolbar .btn { flex: 1 1 auto; }
    .edit-actions .btn { flex: 1 1 auto; }
    .record-toolbar button.main { flex: 1 1 calc(50% - 5px); }
    .record-toolbar input.cupon { flex: 1 1 100%; }

    .auth-main { padding: 34px 0 56px; }
    .auth-card .window__body { padding: 24px 20px 26px; }
    .account-input-wrap { flex-direction: column; gap: 10px; }
    .account-input-wrap .send-code-btn { width: 100%; }
    .submit-row { justify-content: stretch; }
    .submit-row .main-btn,
    .submit-row .btn { width: 100%; }

    .site-footer { padding: 40px 0 0; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .back-to-top { right: 16px; bottom: 16px; }
    .toast-host { bottom: 16px; }

    /* 语言下拉在窄屏右对齐，避免溢出视口 */
    .lang-switch__menu { right: -4px; min-width: 170px; }
}

@media (max-width: 560px) {
    .feature-grid { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .brand__name { display: none; }
    .hero__title { font-size: 28px; }
    .page-hero { padding: 34px 0 22px; }
    .cart-box { padding: 22px 0 0; }
    .window__body { padding: 20px 18px; }
}

/* ---------- 24. 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .marquee__track { animation: none; }
}