/* ============================================================
   Liquid Glass — 客户公开页共用的玻璃层令牌与原子类
   借鉴 Apple 视觉语言：多层半透明 + 背景模糊 + 内侧高光 + 连续大圆角。
   色值、字号、圆角全部取自 DESIGN.md 的调色板与尺度，未新增令牌。
   使用页面：预填单填写页 / 自助查询页 / 查询详情页
   ============================================================ */

:root {
    /* 表面 */
    --lg-page: #f8fafc;
    --lg-ink: #0f172a;
    --lg-ink-soft: #475569;
    --lg-ink-muted: #64748b;
    --lg-ink-dim: #94a3b8;

    /* 玻璃层：由浅到深三层，层级越高越不透明 */
    --lg-glass-1: rgba(255, 255, 255, 0.55);
    --lg-glass-2: rgba(255, 255, 255, 0.72);
    --lg-glass-3: rgba(255, 255, 255, 0.86);
    --lg-glass-rim: rgba(255, 255, 255, 0.65);
    --lg-glass-line: rgba(226, 232, 240, 0.75);
    --lg-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --lg-blur: blur(28px) saturate(180%);
    --lg-blur-soft: blur(18px) saturate(160%);

    /* 交互色 */
    --lg-accent: #2563eb;
    --lg-accent-deep: #1d4ed8;
    --lg-accent-2: #0ea5e9;
    --lg-accent-wash: rgba(37, 99, 235, 0.08);
    --lg-accent-ring: rgba(37, 99, 235, 0.18);
    --lg-success: #059669;
    --lg-success-wash: rgba(16, 185, 129, 0.12);
    --lg-danger: #dc2626;
    --lg-danger-wash: rgba(239, 68, 68, 0.10);
    --lg-warning: #b45309;
    --lg-warning-wash: rgba(245, 158, 11, 0.14);

    /* 阴影：环境光 + 接触阴影，不用彩色光晕 */
    --lg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --lg-shadow: 0 2px 6px rgba(15, 23, 42, 0.05), 0 18px 40px rgba(15, 23, 42, 0.09);
    --lg-shadow-lift: 0 4px 10px rgba(15, 23, 42, 0.06), 0 28px 60px rgba(15, 23, 42, 0.14);

    /* 形状与动效 */
    --lg-r-sm: 10px;
    --lg-r: 14px;
    --lg-r-lg: 20px;
    --lg-r-xl: 24px;
    --lg-r-pill: 999px;
    --lg-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --lg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* 字体：DESIGN.md 声明的系统字体栈 */
    --lg-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif;
    --lg-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --lg-page: #0f172a;
        --lg-ink: #f8fafc;
        --lg-ink-soft: #cbd5e1;
        --lg-ink-muted: #94a3b8;
        --lg-ink-dim: #64748b;

        --lg-glass-1: rgba(30, 41, 59, 0.55);
        --lg-glass-2: rgba(30, 41, 59, 0.72);
        --lg-glass-3: rgba(30, 41, 59, 0.88);
        --lg-glass-rim: rgba(148, 163, 184, 0.28);
        --lg-glass-line: rgba(148, 163, 184, 0.22);
        --lg-highlight: inset 0 1px 0 rgba(248, 250, 252, 0.14);

        --lg-accent: #60a5fa;
        --lg-accent-deep: #93c5fd;
        --lg-accent-2: #38bdf8;
        --lg-accent-wash: rgba(96, 165, 250, 0.14);
        --lg-accent-ring: rgba(96, 165, 250, 0.26);
        --lg-success: #34d399;
        --lg-danger: #f87171;
        --lg-warning: #fbbf24;

        --lg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.4);
        --lg-shadow: 0 2px 6px rgba(15, 23, 42, 0.35), 0 18px 40px rgba(15, 23, 42, 0.5);
        --lg-shadow-lift: 0 4px 10px rgba(15, 23, 42, 0.4), 0 28px 60px rgba(15, 23, 42, 0.6);
    }
}

/* ---------- 页面底：柔和光晕随内容浮动 ---------- */
.lg-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--lg-ink);
    font-family: var(--lg-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background-color: var(--lg-page);
    background-image:
        radial-gradient(1100px 520px at 82% -12%, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0) 62%),
        radial-gradient(880px 460px at 6% -6%, rgba(14, 165, 233, 0.14), rgba(14, 165, 233, 0) 60%),
        radial-gradient(760px 520px at 50% 108%, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 64%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

/* ---------- 玻璃表面原子类 ---------- */
.lg-surface {
    position: relative;
    background: var(--lg-glass-2);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    border: 2px solid var(--lg-glass-rim);
    border-radius: var(--lg-r-xl);
    box-shadow: var(--lg-shadow), var(--lg-highlight);
}

/* 次级玻璃：卡片内部的分区，透明度更低、模糊更轻，避免层层堆叠糊成一片 */
.lg-inset {
    background: var(--lg-glass-1);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
    border: 1px solid var(--lg-glass-line);
    border-radius: var(--lg-r-lg);
}

.lg-hairline { border-bottom: 1px solid var(--lg-glass-line); }

/* ---------- 控件 ---------- */
.lg-input {
    width: 100%;
    min-height: 48px;
    padding: 11px 15px;
    font-family: inherit;
    font-size: 16px;
    color: var(--lg-ink);
    background: var(--lg-glass-3);
    border: 1.5px solid var(--lg-glass-line);
    border-radius: var(--lg-r);
    outline: none;
    appearance: none;
    transition: border-color 0.2s var(--lg-ease), box-shadow 0.2s var(--lg-ease);
}
.lg-input::placeholder { color: var(--lg-ink-dim); }
.lg-input:hover { border-color: var(--lg-ink-dim); }
.lg-input:focus,
.lg-input:focus-visible {
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 4px var(--lg-accent-ring);
}

.lg-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lg-ink-soft);
}

/* ---------- 按钮 ---------- */
.lg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--lg-r);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.22s var(--lg-ease), box-shadow 0.22s var(--lg-ease),
                background-color 0.22s var(--lg-ease), color 0.22s var(--lg-ease);
}
.lg-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.lg-btn--primary {
    border: none;
    color: #ffffff;
    background: linear-gradient(160deg, var(--lg-accent) 0%, var(--lg-accent-2) 100%);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28), var(--lg-highlight);
}
.lg-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37, 99, 235, 0.34); }
.lg-btn--primary:active { transform: translateY(0) scale(0.99); }
.lg-btn--ghost {
    color: var(--lg-ink-soft);
    background: var(--lg-glass-3);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
    border: 1.5px solid var(--lg-glass-line);
}
.lg-btn--ghost:hover { color: var(--lg-accent); border-color: var(--lg-accent); }

/* ---------- 徽章 ---------- */
.lg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--lg-r-pill);
    font-size: 13px;
    font-weight: 600;
    background: var(--lg-accent-wash);
    color: var(--lg-accent-deep);
}
.lg-badge--success { background: var(--lg-success-wash); color: var(--lg-success); }
.lg-badge--warning { background: var(--lg-warning-wash); color: var(--lg-warning); }
.lg-badge--danger { background: var(--lg-danger-wash); color: var(--lg-danger); }

.lg-mono { font-family: var(--lg-font-mono); letter-spacing: 0.02em; }

/* ---------- 入场动效 ---------- */
@keyframes lgRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes lgFade {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: none; }
}
.lg-rise { animation: lgRise 0.6s var(--lg-ease) both; }
.lg-fade { animation: lgFade 0.4s var(--lg-ease) both; }

/* ---------- 降级：不支持 backdrop-filter 时退成实色卡片 ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :root {
        --lg-glass-1: #f1f5f9;
        --lg-glass-2: #ffffff;
        --lg-glass-3: #ffffff;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --lg-glass-1: #1e293b;
            --lg-glass-2: #1e293b;
            --lg-glass-3: #334155;
        }
    }
}

/* 移动端降低模糊半径，保住滚动帧率 */
@media (max-width: 640px) {
    :root {
        --lg-blur: blur(16px) saturate(150%);
        --lg-blur-soft: blur(10px) saturate(140%);
    }
    .lg-page { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
    .lg-btn--primary:hover { transform: none; }
}