/* ============================================================
   远辰智联蔚县分公司 - 公共样式
   Apple Liquid Glass Web Approximation
   - 禁紫色、禁 emoji、适当圆角、现实感拉满
   ============================================================ */

/* === 设计令牌 (Design Tokens) === */
:root {
    /* 钛灰冷调底色 - 避开紫色 */
    --bg-0: #0a0a0c;          /* 钛黑 */
    --bg-1: #111114;          /* 深空灰 */
    --bg-2: #1c1c1f;          /* 卡片层 */
    --bg-3: #2a2a2e;          /* 浮起层 */

    /* 文字阶梯 - iOS 风格 */
    --label-1: #f5f5f7;       /* 主文 - 暖白 */
    --label-2: #d2d2d7;       /* 副文 */
    --label-3: #a1a1a6;       /* 三级 */
    --label-4: #6e6e73;       /* 微弱 */

    /* Apple 系统色 (避开紫色) */
    --system-blue: #0a84ff;
    --system-cyan: #64d2ff;
    --system-teal: #30d158;
    --system-mint: #66d4cf;
    --system-amber: #ff9f0a;
    --system-orange: #ff453a;

    /* 语义色 */
    --accent: var(--system-blue);
    --accent-glow: rgba(10, 132, 255, 0.32);
    --accent-soft: rgba(10, 132, 255, 0.12);
    --success: var(--system-teal);
    --warning: var(--system-amber);
    --danger: var(--system-orange);

    /* 玻璃材质参数 */
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-bg-strong: rgba(255, 255, 255, 0.10);
    --glass-bg-subtle: rgba(255, 255, 255, 0.035);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-border-strong: rgba(255, 255, 255, 0.18);
    --glass-highlight: rgba(255, 255, 255, 0.22);
    --glass-shadow:
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 -1px 0 rgba(0, 0, 0, 0.20) inset,
        0 20px 60px -20px rgba(0, 0, 0, 0.55),
        0 8px 24px -8px rgba(0, 0, 0, 0.35);
    --glass-blur: blur(28px) saturate(180%);

    /* 圆角阶梯 (iOS 风格) */
    --r-2xs: 8px;
    --r-xs: 12px;
    --r-sm: 14px;
    --r-md: 18px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-2xl: 36px;
    --r-pill: 980px;

    /* 间距节奏 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* 字体 */
    --font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                 "PingFang SC", "Microsoft YaHei", "Helvetica Neue",
                 Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

    /* 缓动曲线 (Spring 物理) */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* 物理光感 - 现实感 */
    --light-source: 180deg;          /* 主光源方向 */
    --specular: rgba(255, 255, 255, 0.15);
}

/* === 全局重置 === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--label-1);
    background: var(--bg-0);
    min-height: 100vh;
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv01", "cv11";
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* === 现实感底色 - 钛灰渐变 + 微妙噪点 === */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(10, 132, 255, 0.18), transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 30%, rgba(48, 209, 88, 0.10), transparent 55%),
        radial-gradient(ellipse 70% 60% at 15% 80%, rgba(255, 159, 10, 0.08), transparent 55%),
        linear-gradient(180deg, #0c0c10 0%, #0a0a0c 100%);
    pointer-events: none;
}

/* 噪点纹理 (增加现实感) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.025;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* === 液态玻璃核心 (Apple Liquid Glass Web Approximation) === */
.liquid-glass {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    isolation: isolate;
}

/* 顶部高光带 - 模拟玻璃边缘折射 */
.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        180deg,
        var(--glass-highlight) 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0) 70%,
        rgba(255, 255, 255, 0.06) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* 内部高光 - 上沿 */
.liquid-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    pointer-events: none;
    z-index: 2;
}

/* 强版玻璃 - 模态框/侧边栏 */
.liquid-glass-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--glass-border-strong);
}

/* 弱版玻璃 - 装饰/次要 */
.liquid-glass-subtle {
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 浮动光斑背景 - 现实感物理光 */
.glow-orbs {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.55;
    will-change: transform;
}

.glow-orb-1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(10, 132, 255, 0.35), transparent 65%);
    top: -15%; left: -8%;
    animation: orb-drift-1 28s ease-in-out infinite;
}

.glow-orb-2 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(48, 209, 88, 0.22), transparent 65%);
    top: 35%; right: -10%;
    animation: orb-drift-2 32s ease-in-out infinite;
}

.glow-orb-3 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255, 159, 10, 0.18), transparent 65%);
    bottom: -10%; left: 28%;
    animation: orb-drift-3 36s ease-in-out infinite;
}

@keyframes orb-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.06); }
    66% { transform: translate(-20px, 25px) scale(0.96); }
}

@keyframes orb-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 40px) scale(0.94); }
    66% { transform: translate(25px, -20px) scale(1.05); }
}

@keyframes orb-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(35px, -35px) scale(1.04); }
}

/* === 按钮系统 (iOS 圆角胶囊) === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 22px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    transition:
        transform 0.25s var(--ease-spring),
        background 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out),
        border-color 0.2s var(--ease-out);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.97);
}

/* 主按钮 - Apple 系统蓝 */
.btn-primary {
    background: var(--system-blue);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 -1px 0 rgba(0, 0, 0, 0.15) inset,
        0 6px 20px -4px var(--accent-glow);
}

.btn-primary:hover {
    background: #1a8fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30) inset,
        0 -1px 0 rgba(0, 0, 0, 0.15) inset,
        0 10px 28px -4px var(--accent-glow);
}

/* 次按钮 - 玻璃材质 */
.btn-glass {
    background: var(--glass-bg);
    color: var(--label-1);
    border-color: var(--glass-border);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.btn-glass:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
}

/* 大尺寸主按钮 */
.btn-lg {
    padding: 16px 30px;
    font-size: 16px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* 危险按钮 */
.btn-danger {
    background: var(--system-orange);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.btn-danger:hover { background: #ff5e54; }

/* 文字按钮 */
.btn-text {
    background: transparent;
    color: var(--system-blue);
    padding: 8px 14px;
}

.btn-text:hover { background: var(--accent-soft); }

/* === 卡片系统 === */
.card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    transition:
        transform 0.4s var(--ease-spring),
        box-shadow 0.3s var(--ease-out),
        border-color 0.3s var(--ease-out);
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-strong);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 -1px 0 rgba(0, 0, 0, 0.20) inset,
        0 32px 80px -20px rgba(0, 0, 0, 0.65),
        0 12px 32px -8px rgba(0, 0, 0, 0.45);
}

/* 卡片顶部高光 */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.30),
        transparent
    );
    pointer-events: none;
}

/* === 头像 === */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--system-blue), var(--system-cyan));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 20px;
}

/* === 徽章 (Pill 标签) === */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    background: var(--glass-bg);
    color: var(--label-1);
    border: 1px solid var(--glass-border);
}

.pill-blue { background: rgba(10, 132, 255, 0.15); color: var(--system-blue); border-color: rgba(10, 132, 255, 0.25); }
.pill-teal { background: rgba(48, 209, 88, 0.15); color: var(--system-teal); border-color: rgba(48, 209, 88, 0.25); }
.pill-amber { background: rgba(255, 159, 10, 0.15); color: var(--system-amber); border-color: rgba(255, 159, 10, 0.25); }
.pill-orange { background: rgba(255, 69, 58, 0.15); color: var(--system-orange); border-color: rgba(255, 69, 58, 0.25); }
.pill-mint { background: rgba(102, 212, 207, 0.15); color: var(--system-mint); border-color: rgba(102, 212, 207, 0.25); }

/* === 表单 === */
.form-group { margin-bottom: var(--space-5); }

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--label-2);
    margin-bottom: var(--space-2);
    letter-spacing: 0.01em;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-sm);
    color: var(--label-1);
    font-size: 15px;
    font-family: inherit;
    transition:
        border-color 0.2s var(--ease-out),
        background 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--label-4);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--system-blue);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15);
}

.input-with-icon {
    position: relative;
}

.input-with-icon .form-input { padding-left: 44px; }

.input-icon-left {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--label-3);
    font-size: 15px;
    pointer-events: none;
}

/* === 提示框 === */
.alert {
    padding: 14px 18px;
    border-radius: var(--r-sm);
    font-size: 14px;
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.alert-error {
    background: rgba(255, 69, 58, 0.10);
    border-color: rgba(255, 69, 58, 0.25);
    color: #ff8a82;
}

.alert-success {
    background: rgba(48, 209, 88, 0.10);
    border-color: rgba(48, 209, 88, 0.25);
    color: #6ee599;
}

.alert-info {
    background: rgba(10, 132, 255, 0.10);
    border-color: rgba(10, 132, 255, 0.25);
    color: #7ab8ff;
}

/* === 排版 === */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--label-1);
    line-height: 1.15;
}

.text-muted { color: var(--label-3); }
.text-subtle { color: var(--label-4); }

.text-display {
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.text-h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.text-h2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.text-h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* === 滚动条 === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: var(--r-pill);
    transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

::selection {
    background: rgba(10, 132, 255, 0.32);
    color: #fff;
}

/* === 工具类 === */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

.text-center { text-align: center; }
.hidden { display: none; }

/* === 减弱透明度用户 - 兜底 === */
@media (prefers-reduced-transparency: reduce) {
    .liquid-glass,
    .liquid-glass-strong,
    .liquid-glass-subtle,
    .card {
        background: rgba(28, 28, 31, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
    .glow-orb { animation: none !important; }
}

/* === 响应式 === */
@media (max-width: 768px) {
    .container { padding: 0 var(--space-4); }
}