/* ==========================================================================
   南山书院预约系统 - 新中式书院茶韵视觉设计系统 (Design System & Tokens)
   ========================================================================== */

:root {
    /* --- 1. Classical Chinese Color Palette (国风雅韵色盘) --- */
    
    /* 宣纸底色 (Parchment & Paper Tones) */
    --bg-paper: #FBF8F2;                  /* 澄心堂宣纸底色 (Warm Xuan Paper) */
    --bg-paper-light: #FFFDF9;            /* 莹白宣纸 (Bright Paper) */
    --bg-card: rgba(255, 255, 255, 0.94); /* 卡片玉白底色 (Translucent Jade White) */
    --bg-card-hover: #FFFFFF;             /* 卡片悬浮底色 */
    --bg-card-subtle: #FAF6ED;            /* 雅致素绢底 (Ivory Silk Background) */
    
    /* 松烟水墨 (Ink & Charcoal Text Scale) */
    --ink-deep: #24201D;                  /* 浓墨 (Songyan Deep Ink - Headings) */
    --ink-primary: #3B342E;               /* 焦墨 (Standard Body Text) */
    --ink-secondary: #70685E;             /* 浓淡适中文墨 (Secondary Notes/Labels) */
    --ink-muted: #9E968B;                 /* 远山浅墨 (Placeholders / Muted) */
    --ink-faint: #D8D2C5;                 /* 极淡墨线 (Hairline Dividers) */
    
    /* 朱砂雅印 (Vermilion & Seal Accent Tones) */
    --seal-vermilion: #BD3124;            /* 极正朱砂 (Cinnabar Red - Primary Action & Seals) */
    --seal-vermilion-hover: #9E251A;      /* 深朱砂 (Dark Cinnabar Hover) */
    --seal-vermilion-soft: rgba(189, 49, 36, 0.08); /* 朱砂淡晕 (Soft Vermilion Tint) */
    --seal-vermilion-border: rgba(189, 49, 36, 0.35);
    
    /* 竹青与松柏 (Bamboo Green & Jade - Success & Active Pass) */
    --bamboo-green: #487352;              /* 晴竹青 (Fresh Bamboo Green) */
    --bamboo-green-hover: #36593E;        /* 墨竹青 (Deep Bamboo) */
    --bamboo-green-soft: rgba(72, 115, 82, 0.10); /* 竹韵浅绿 (Bamboo Tint) */
    --bamboo-green-border: rgba(72, 115, 82, 0.35);
    
    /* 茶韵与泥金 (Tea Ochre & Muted Gold - VIP & Accents) */
    --tea-brown: #5C4838;                 /* 普洱茶褐 (Pu'er Tea Brown) */
    --gold-ochre: #C49746;                /* 泥金/赭石 (Scholarly Gold/Ochre) */
    --gold-ochre-soft: rgba(196, 151, 70, 0.12); /* 泥金淡晕 (Gold Ochre Tint) */
    --gold-ochre-border: rgba(196, 151, 70, 0.35);
    
    /* 黛蓝与远山青 (Mountain Indigo - Night Deferred Privilege) */
    --mountain-indigo: #2B3E50;           /* 远山黛蓝 (Mountain Mist Indigo) */
    --mountain-indigo-soft: rgba(43, 62, 80, 0.08); /* 黛蓝淡晕 */
    --mountain-indigo-border: rgba(43, 62, 80, 0.30);

    /* 纸张微边 (Paper Edge Borders) */
    --border-paper: rgba(112, 104, 94, 0.15); /* 柔和纸沿线 */
    --border-paper-strong: rgba(112, 104, 94, 0.28);
    --border-dashed-subtle: rgba(196, 151, 70, 0.30);

    /* --- 2. Mountain-Water Breathing Room Spacing Grid (8pt 留白栅格) --- */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* --- 3. Elevation & Atmospheric Diffusion (水墨晕染软阴影) --- */
    --shadow-ground: 0 2px 10px rgba(36, 32, 29, 0.04);
    --shadow-card: 0 4px 20px rgba(36, 32, 29, 0.06), 0 1px 3px rgba(36, 32, 29, 0.03);
    --shadow-raised: 0 8px 32px rgba(36, 32, 29, 0.10), 0 2px 6px rgba(36, 32, 29, 0.04);
    --shadow-modal: 0 16px 48px rgba(36, 32, 29, 0.18), 0 4px 12px rgba(36, 32, 29, 0.06);

    /* --- 4. Border Radii (温润书页圆角) --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 9999px;

    /* --- 5. Typography Scale & Font Stacks (书卷文风字阶) --- */
    --font-serif: "LXGW WenKai", "SimSun", "STSong", serif;
    --font-sans: "LXGW WenKai", -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, sans-serif;
    --font-mono: "LXGW WenKai", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-tabular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "LXGW WenKai", monospace;

    --font-size-xs: 0.8125rem;  /* 13px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-md: 1.125rem;   /* 18px */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-2xl: 2rem;      /* 32px */

    --line-height-tight: 1.35;
    --line-height-base: 1.6;
    --line-height-loose: 1.8;

    /* --- 6. Transitions (沉静微动效) --- */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 0.18s var(--ease-out-quint);
    --transition-base: 0.28s var(--ease-out-quint);
    --transition-smooth: 0.4s var(--ease-out-quint);

    /* --- 7. Mobile Safe-Area Variables (WeChat / iOS Safe Insets) --- */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* --- 8. Backward Compatibility Aliases (保证历史样式完全兼容) --- */
    --primary-red: var(--seal-vermilion);
    --dark-red: var(--seal-vermilion-hover);
    --light-beige: var(--bg-paper-light);
    --paper-beige: var(--bg-paper);
    --gold: var(--gold-ochre);
    --dark-brown: var(--tea-brown);
    --ink-black: var(--ink-deep);
    --rice-white: var(--bg-card); /* Fix for undefined variable bug */
    --shadow-soft: var(--shadow-card);
}

/* ==========================================================================
   全局重置与视口适配 (Global Reset & Mobile-First Foundation)
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

button, a, input, select, textarea, .link-btn, .auth-tab, .plate-input-box, .province-grid span, .page-nav-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-serif);
    background-color: var(--bg-paper);
    color: var(--ink-primary);
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: max(16px, env(safe-area-inset-top, 16px));
    padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 0px)));
    padding-left: max(12px, env(safe-area-inset-left, 12px));
    padding-right: max(12px, env(safe-area-inset-right, 12px));
    background-image:
        linear-gradient(rgba(251, 248, 242, 0.94), rgba(251, 248, 242, 0.94)),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d4cfc4' fill-opacity='0.16' fill-rule='evenodd'/%3E%3C/svg%3E");
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
    line-height: var(--line-height-base);
}

/* 顶部雅致装饰条 (Top Gradient Edge) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--seal-vermilion), var(--gold-ochre), var(--bamboo-green));
    z-index: 100;
}

/* 标题样式 (Header Section) */
.header {
    text-align: center;
    margin: 12px 0 24px;
    position: relative;
    width: 100%;
    animation: fadeInDown 0.8s ease-out;
}

.header h1 {
    font-size: 2.2rem;
    color: var(--ink-deep);
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 6px;
    position: relative;
    display: inline-block;
    text-shadow: 1px 1px 2px rgba(36, 32, 29, 0.06);
}

.header .subtitle {
    font-size: 1rem;
    color: var(--bamboo-green);
    letter-spacing: 3px;
    opacity: 0.92;
    font-weight: 600;
}

/* 主容器样式 (Main Containers) */
.container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding-bottom: max(32px, calc(16px + env(safe-area-inset-bottom, 0px)));
    box-sizing: border-box;
}

/* 卡片通用样式 (Atmospheric Cards) */
.form-container,
.info-container {
    background-color: var(--bg-card);
    padding: 30px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-paper);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    animation: fadeInUp 0.7s ease-out forwards;
    box-sizing: border-box;
}

.form-container {
    animation-delay: 0.1s;
}

.info-container {
    animation-delay: 0.2s;
}

/* 表单容器装饰 (Subtle Top Accent) */
.form-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--seal-vermilion);
    opacity: 0.85;
}

.form-container::after {
    content: "雅集";
    position: absolute;
    bottom: -10px;
    right: 5px;
    font-size: 5rem;
    color: var(--seal-vermilion);
    opacity: 0.03;
    font-family: "SimSun", serif;
    font-weight: bold;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-10deg);
}

/* 表单元素样式 */
.form-group {
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--ink-deep);
    font-size: 0.98rem;
    letter-spacing: 0.5px;
}

.input-wrapper {
    position: relative;
    background: var(--bg-card-subtle);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: background 0.3s ease;
    border: 1px solid var(--border-paper);
    border-bottom: none;
}

.input-wrapper:focus-within {
    background: #FFFFFF;
    border-color: var(--gold-ochre-border);
}

.input-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--ink-faint);
    transform-origin: center;
    transition: transform 0.4s var(--ease-out-quint), height 0.3s ease, background-color 0.3s ease;
}

.input-wrapper:focus-within::after {
    height: 2px;
    background-color: var(--seal-vermilion);
    transform: scaleX(1);
}

input[type="text"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"] {
    width: 100%;
    padding: 14px 12px;
    min-height: 48px;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--ink-deep);
    font-family: var(--font-serif);
    outline: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    box-sizing: border-box;
}

input::placeholder {
    color: var(--ink-muted);
    font-size: 0.95rem;
}

input:disabled {
    color: var(--ink-muted);
    background-color: transparent;
}

/* Custom styles for date input (Universal Touch Coverage) */
input[type="date"] {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    min-height: 48px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 2;
}

.input-wrapper:has(input[type="date"])::before {
    content: "📅";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.55;
    font-size: 1.15rem;
    pointer-events: none;
    z-index: 1;
}

input[type="date"]::-webkit-datetime-edit {
    padding-left: 0;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.error-message {
    color: var(--seal-vermilion);
    font-size: 0.85rem;
    margin-top: 6px;
    min-height: 18px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.3s ease;
}

.error-message:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

.info-text {
    font-size: 0.84rem;
    color: var(--ink-secondary);
    margin-top: 6px;
    line-height: 1.5;
}

/* 按钮样式 - 朱砂印章风格 */
.button-container {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}

button {
    background-color: var(--seal-vermilion);
    color: white;
    padding: 14px 40px;
    min-height: 48px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.15rem;
    font-family: var(--font-serif);
    font-weight: bold;
    letter-spacing: 3px;
    box-shadow: 0 4px 15px rgba(189, 49, 36, 0.25);
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 320px;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* 按钮宣纸颗粒质感 */
button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23000000' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.25;
    pointer-events: none;
}

button:hover {
    background-color: var(--seal-vermilion-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(189, 49, 36, 0.35);
}

button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(189, 49, 36, 0.2);
    background-color: var(--seal-vermilion-hover);
}

/* 信息区域 */
.info-container h2 {
    font-size: 1.35rem;
    color: var(--ink-deep);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink-faint);
    text-align: center;
    letter-spacing: 1px;
}

.info-section {
    margin-bottom: 18px;
}

.info-section:last-child {
    margin-bottom: 0;
}

.info-section h3 {
    color: var(--bamboo-green);
    margin-bottom: 6px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.info-section h3 i {
    margin-right: 8px;
    font-style: normal;
    font-size: 1.15rem;
}

.info-section p {
    margin-bottom: 4px;
    line-height: 1.6;
    padding-left: 28px;
    font-size: 0.92rem;
    color: var(--ink-secondary);
}

.info-section a {
    color: var(--seal-vermilion);
    text-decoration: none;
    border-bottom: 1px dashed var(--seal-vermilion-border);
    padding-bottom: 1px;
    transition: var(--transition-fast);
}

.info-section a:hover {
    color: var(--seal-vermilion-hover);
    border-bottom-style: solid;
}

/* 消息提示 */
#message {
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
    line-height: 1.5;
}

#message:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

.success-message {
    background-color: var(--bamboo-green-soft);
    color: var(--bamboo-green-hover);
    border: 1px solid var(--bamboo-green-border);
}

.error-message-container {
    background-color: var(--seal-vermilion-soft);
    color: var(--seal-vermilion);
    border: 1px solid var(--seal-vermilion-border);
}

/* 装饰背景字 */
.decoration {
    position: fixed;
    z-index: -1;
    opacity: 0.05;
    font-family: "SimSun", serif;
    pointer-events: none;
    color: var(--tea-brown);
}

.decoration-1 {
    top: -20px;
    left: -20px;
    font-size: 8rem;
    transform: rotate(15deg);
}

.decoration-2 {
    bottom: 20px;
    right: -20px;
    font-size: 10rem;
    transform: rotate(-10deg);
}

/* 动画定义 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   车牌选择器与省份弹层 (License Plate Selector & Province Grid)
   ========================================================================== */

.car-plate-wrapper {
    position: relative;
    margin-top: 10px;
}

.plate-inputs-container {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 10px;
}

.plate-input-box {
    flex: 1;
    aspect-ratio: 3/4;
    min-height: 44px;
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-sm);
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-family: var(--font-tabular);
    font-weight: 700;
    color: var(--ink-deep);
    cursor: text;
    transition: var(--transition-fast);
    position: relative;
    text-align: center;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background-clip: padding-box;
    z-index: 1;
    box-sizing: border-box;
}

input.plate-input-box {
    display: block;
    width: 100%;
    border: 1px solid var(--ink-faint);
    padding: 0;
    text-align: center;
}

.plate-input-box:focus {
    border-color: var(--seal-vermilion);
    box-shadow: 0 0 0 2px var(--seal-vermilion-soft);
    background-color: #FFFFFF;
    outline: none;
}

.plate-input-box.province-box {
    cursor: pointer;
    caret-color: transparent;
    color: var(--seal-vermilion);
    font-family: var(--font-serif);
    background-color: var(--seal-vermilion-soft);
    border: 1px solid var(--seal-vermilion-border);
    position: relative;
    z-index: 1;
}

.plate-input-box.new-energy {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z' fill='%23487352' fill-opacity='0.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    border-style: dashed;
}

.plate-input-box.new-energy::placeholder {
    color: var(--ink-muted);
    font-size: 1.3rem;
    font-weight: normal;
    opacity: 0.8;
}

.plate-input-box.new-energy.filled {
    background-image: none;
    border-style: solid;
}

/* 省份下拉框样式 (7-Column Optimized Touch Grid) */
.province-dropdown {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 100;
    padding: 12px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
    display: none;
    border: 1px solid var(--border-paper-strong);
    box-sizing: border-box;
    margin-top: 10px;
}

.province-dropdown.active {
    display: block;
    animation: fadeInDown 0.2s ease-out;
}

.province-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.province-grid span {
    background-color: var(--bg-card-subtle);
    border: 1px solid var(--border-paper);
    border-radius: var(--radius-sm);
    padding: 10px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.05rem;
    color: var(--ink-deep);
    cursor: pointer;
    transition: var(--transition-fast);
    -webkit-user-select: none;
    user-select: none;
}

.province-grid span:hover {
    background-color: var(--gold-ochre-soft);
    border-color: var(--gold-ochre-border);
}

.province-grid span:active {
    background-color: var(--seal-vermilion);
    border-color: var(--seal-vermilion);
    color: white;
}

/* ==========================================================================
   头部用户状态栏 (Header Floating User Status Bar)
   ========================================================================== */

.user-status-bar {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 12px;
    padding: 0 8px;
    z-index: 50;
    animation: fadeInDown 0.6s ease-out;
    box-sizing: border-box;
}

.user-status-container {
    background: var(--bg-card);
    border: 1px solid var(--border-paper);
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-shadow: var(--shadow-ground);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.user-status-guest,
.user-status-member {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--ink-secondary);
}

.status-badge-guest {
    color: var(--ink-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-badge-guest i {
    font-style: normal;
    color: var(--bamboo-green);
}

.status-welcome {
    color: var(--ink-secondary);
}

.status-welcome strong {
    color: var(--seal-vermilion);
    font-weight: 700;
}

.phone-tail {
    color: var(--ink-muted);
    font-size: 0.86rem;
    margin-left: 2px;
    font-family: var(--font-tabular);
}

.member-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-divider {
    color: var(--ink-faint);
    font-size: 0.85rem;
    padding: 0 2px;
}

/* Link-style Buttons (≥44px Touch Target) */
.link-btn {
    background: transparent;
    border: none;
    padding: 6px 10px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    box-shadow: none;
    width: auto;
    text-decoration: none;
}

.link-btn:hover {
    color: var(--seal-vermilion);
    background: var(--seal-vermilion-soft);
}

.link-btn.highlight-link {
    color: var(--seal-vermilion);
    border: 1px solid var(--seal-vermilion-border);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--seal-vermilion-soft);
}

.link-btn.highlight-link:hover {
    background: var(--seal-vermilion);
    color: white;
}

.link-btn.highlight-history-link {
    color: var(--bamboo-green);
    font-weight: 600;
}

.link-btn.highlight-history-link:hover {
    color: var(--bamboo-green-hover);
    background: var(--bamboo-green-soft);
}

.link-btn.danger-link {
    color: var(--ink-muted);
}

.link-btn.danger-link:hover {
    color: var(--seal-vermilion);
    background: var(--seal-vermilion-soft);
}

.link-btn.admin-link {
    color: var(--ink-secondary);
    font-size: 0.88rem;
    opacity: 0.85;
}

.link-btn.admin-link:hover {
    color: var(--seal-vermilion);
    opacity: 1;
}

/* ==========================================================================
   弹窗体系与防穿透布局 (Modals & Safe Viewports)
   ========================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: rgba(36, 32, 29, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: max(16px, env(safe-area-inset-top, 16px)) 
             max(12px, env(safe-area-inset-right, 12px)) 
             max(24px, calc(16px + env(safe-area-inset-bottom, 0px))) 
             max(12px, env(safe-area-inset-left, 12px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    animation: fadeIn 0.25s ease-out;
}

.modal-card {
    background-color: var(--bg-paper-light);
    background-image:
        linear-gradient(rgba(255, 253, 249, 0.96), rgba(255, 253, 249, 0.96)),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 30L15 15M30 30L45 45' stroke='%23d4cfc4' stroke-width='0.5' stroke-opacity='0.2'/%3E%3C/svg%3E");
    border: 1px solid var(--border-paper-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    max-height: calc(85dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 28px 24px;
    position: relative;
    box-sizing: border-box;
    animation: zoomIn 0.3s var(--ease-out-quint);
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--ink-muted);
    cursor: pointer;
    box-shadow: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-fast);
    touch-action: manipulation;
}

.modal-close-btn:hover {
    color: var(--seal-vermilion);
    background: var(--seal-vermilion-soft);
    transform: none;
}

.modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.seal-icon {
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 36px;
    border: 2px solid var(--seal-vermilion);
    color: var(--seal-vermilion);
    font-size: 0.95rem;
    font-weight: bold;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transform: rotate(-4deg);
    background: var(--seal-vermilion-soft);
}

.modal-title {
    font-size: 1.45rem;
    color: var(--ink-deep);
    font-weight: 700;
    letter-spacing: 2px;
}

.modal-subtitle {
    font-size: 0.88rem;
    color: var(--bamboo-green);
    margin-top: 4px;
    letter-spacing: 1px;
}

/* 书签式标签页导航 (Bookmark Tabs) */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--ink-faint);
    margin-bottom: 20px;
    gap: 6px;
    overflow-x: auto;
}

.auth-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: var(--transition-fast);
    box-shadow: none;
    width: auto;
}

.auth-tab:hover {
    color: var(--seal-vermilion);
    background: var(--seal-vermilion-soft);
}

.auth-tab.active {
    color: var(--seal-vermilion);
    border-bottom-color: var(--seal-vermilion);
    background: var(--seal-vermilion-soft);
}

.auth-guide-hint {
    background: var(--bamboo-green-soft);
    border: 1px solid var(--bamboo-green-border);
    color: var(--ink-deep);
    font-size: 0.86rem;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    text-align: center;
    line-height: 1.5;
}

.auth-guide-hint strong {
    color: var(--seal-vermilion);
}

/* 短信输入组 (SMS Input Group) */
.sms-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sms-input-group .input-wrapper {
    flex: 1;
}

.send-sms-btn {
    width: auto;
    max-width: none;
    padding: 12px 16px;
    min-height: 48px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    background-color: var(--bamboo-green);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(72, 115, 82, 0.25);
    transition: var(--transition-fast);
}

.send-sms-btn:hover:not(:disabled) {
    background-color: var(--bamboo-green-hover);
}

.send-sms-btn:disabled {
    background-color: var(--ink-faint);
    color: var(--ink-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* 反馈提示与表单提交 */
.auth-feedback {
    min-height: 20px;
    margin-top: 12px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: all 0.3s ease;
}

.auth-feedback.error {
    color: var(--seal-vermilion);
    background: var(--seal-vermilion-soft);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--seal-vermilion-border);
}

.auth-feedback.success {
    color: var(--bamboo-green);
    background: var(--bamboo-green-soft);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bamboo-green-border);
}

.auth-btn-container {
    margin-top: 20px;
}

.auth-submit-btn {
    width: 100%;
    max-width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    border-radius: var(--radius-sm);
}

.required-star {
    color: var(--seal-vermilion);
    margin-left: 2px;
}

.optional-hint {
    font-size: 0.8rem;
    color: var(--ink-muted);
    font-weight: normal;
    margin-left: 4px;
}

/* 个人中心卡片详情 */
.profile-info-card {
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-paper);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--ink-faint);
    font-size: 0.94rem;
}

.profile-row:last-child {
    border-bottom: none;
}

.profile-label {
    color: var(--ink-secondary);
}

.profile-value {
    color: var(--ink-deep);
    font-weight: 600;
}

.text-bamboo {
    color: var(--bamboo-green);
}

.text-muted {
    color: var(--ink-muted);
    font-size: 0.88rem;
}

.profile-actions-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.secondary-seal-btn {
    background-color: var(--bamboo-green);
    color: white;
    padding: 12px;
    min-height: 44px;
    font-size: 0.98rem;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-sm);
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.secondary-seal-btn:hover {
    background-color: var(--bamboo-green-hover);
}

.outline-seal-btn {
    background: transparent;
    color: var(--seal-vermilion);
    border: 1px solid var(--seal-vermilion);
    padding: 12px;
    min-height: 44px;
    font-size: 0.98rem;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-sm);
    letter-spacing: 2px;
    box-shadow: none;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.outline-seal-btn:hover {
    background: var(--seal-vermilion-soft);
}

/* ==========================================================================
   会员主视图与极速预约流水线 (Member Dashboard & Booking Pipeline)
   ========================================================================== */

.member-main-container {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 0px)));
    box-sizing: border-box;
}

.member-dashboard-card {
    background-color: var(--bg-card);
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-paper);
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* 消除重叠边框 (Remove Inner Double Border) */
.member-dashboard-card::before {
    display: none;
}

/* 会员欢迎与特权提示栏 */
.member-vip-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--gold-ochre-soft) 0%, rgba(196, 151, 70, 0.04) 100%);
    border: 1px solid var(--gold-ochre-border);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    margin-bottom: 22px;
}

.vip-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vip-seal {
    background: linear-gradient(135deg, var(--gold-ochre) 0%, #A37930 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(163, 121, 48, 0.25);
}

.vip-text {
    font-size: 0.95rem;
    color: var(--ink-deep);
}

.vip-text strong {
    color: var(--seal-vermilion);
    font-size: 1.05rem;
}

/* 散客非营业时段提示 */
.business-hours-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--seal-vermilion-soft);
    border: 1px solid var(--seal-vermilion-border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    color: var(--ink-deep);
    line-height: 1.5;
}

.business-hours-notice .notice-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* 会员夜间递延预约提示 (Night Deferred Booking Banner) */
.vip-deferred-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--mountain-indigo-soft);
    border: 1px solid var(--mountain-indigo-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.vip-notice-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.2;
}

.vip-notice-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--mountain-indigo);
    margin-bottom: 4px;
    font-weight: 700;
}

.vip-notice-content p {
    font-size: 0.88rem;
    color: var(--ink-secondary);
    line-height: 1.55;
    margin: 0;
}

.vip-notice-content p strong {
    display: inline;
    color: var(--seal-vermilion);
}

/* ==========================================================================
   会员主视图卡片组件: 我的通行码 & 极速预约 (Today Pass & Booking Pipeline)
   ========================================================================== */

.today-pass-card,
.booking-pipeline-card {
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-paper);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-ground);
    position: relative;
    box-sizing: border-box;
}

.today-pass-empty-box,
.pipeline-inner-panel {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--border-paper);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.today-pass-empty-box {
    text-align: center;
    border-style: dashed;
    border-color: var(--border-paper-strong);
    padding: 24px 16px;
}

.today-empty-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.today-empty-text {
    color: var(--ink-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
}

.pipeline-state-box {
    animation: fadeIn 0.3s ease;
}

.pipeline-header-badge {
    background: var(--bamboo-green-soft);
    color: var(--bamboo-green);
    border: 1px solid var(--bamboo-green-border);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pipeline-header-badge.badge-night {
    background: var(--gold-ochre-soft);
    color: var(--gold-ochre);
    border-color: var(--gold-ochre-border);
}

.pipeline-booking-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pipeline-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.pipeline-form-row label {
    font-size: 0.95rem;
    color: var(--ink-secondary);
    margin-bottom: 0;
    white-space: nowrap;
    font-weight: 600;
}

.pipeline-input-wrap {
    flex: 1;
}

.pipeline-date-input {
    width: 100%;
    padding: 10px 14px;
    min-height: 46px;
    border: 1px solid var(--border-paper-strong);
    border-radius: var(--radius-sm);
    font-size: 0.96rem;
    background: #FFFFFF;
    color: var(--ink-deep);
    font-family: var(--font-serif);
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.pipeline-date-input:focus {
    border-color: var(--bamboo-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 90, 68, 0.12);
}

.pipeline-date-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--seal-vermilion-soft);
    color: var(--seal-vermilion);
    border: 1px solid var(--seal-vermilion-border);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pipeline-submit-btn {
    background: linear-gradient(135deg, var(--bamboo-green) 0%, var(--bamboo-green-hover) 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 24px;
    min-height: 46px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
    letter-spacing: 1px;
    box-shadow: 0 3px 10px rgba(46, 90, 68, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex: 1;
}

.pipeline-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(46, 90, 68, 0.3);
}

.pipeline-submit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--ink-faint);
    color: var(--ink-muted);
    box-shadow: none;
    transform: none;
}

.pipeline-submit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}

.pipeline-cancel-link {
    font-size: 0.88rem;
    color: var(--seal-vermilion);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    padding: 8px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.pipeline-cancel-link:hover {
    opacity: 0.8;
}

/* 进度步进器 (Pipeline Progress Steps) */
.pipeline-steps-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 10px;
}

.pipeline-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.45;
    transition: all 0.3s ease;
}

.pipeline-step-item.active {
    opacity: 1;
}

.step-circle {
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--ink-faint);
    font-size: 0.84rem;
    font-weight: bold;
    color: var(--ink-secondary);
    font-family: var(--font-tabular);
}

.pipeline-step-item.active .step-circle {
    background: var(--gold-ochre);
    border-color: var(--gold-ochre);
    color: #FFFFFF;
}

.step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-deep);
    white-space: nowrap;
}

.pipeline-step-line {
    flex: 1;
    height: 2px;
    background: var(--ink-faint);
    margin: 0 8px -14px;
}

.pipeline-status-box {
    text-align: center;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-paper);
}

.pipeline-status-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(196, 151, 70, 0.2);
    border-top-color: var(--seal-vermilion);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}

.pipeline-status-text {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink-deep);
    margin-bottom: 6px;
}

.pipeline-countdown {
    font-size: 0.88rem;
    color: var(--gold-ochre);
    font-family: var(--font-tabular);
}

.pipeline-countdown strong {
    color: var(--seal-vermilion);
    font-size: 1.05rem;
    font-family: var(--font-tabular);
}

/* 审批成功即刻出码状态 (Pipeline Success State) */
.pipeline-success-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bamboo-green-border);
}

.pipeline-success-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bamboo-green-soft);
    color: var(--bamboo-green-hover);
    border: 1px solid var(--bamboo-green-border);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
}

.pipeline-success-date {
    font-size: 0.9rem;
    color: var(--ink-secondary);
}

.pipeline-qr-wrapper {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #FFFFFF;
    border: 1px solid var(--border-paper-strong);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 14px;
}

.pipeline-qr-box {
    width: 110px;
    height: 110px;
    border: 1px solid var(--gold-ochre-border);
    border-radius: var(--radius-sm);
    padding: 4px;
    background: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pipeline-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pipeline-qr-info {
    flex: 1;
}

.pipeline-qr-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink-deep);
    margin-bottom: 6px;
}

.pipeline-qr-hint {
    font-size: 0.85rem;
    color: var(--ink-secondary);
    line-height: 1.5;
}

.pipeline-success-actions {
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   预约历史记录列表与通行码展开 (History List & Inline Pass Expansion)
   ========================================================================== */

.member-appointment-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ink-faint);
}

.section-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.section-title-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.section-title-left h3 {
    font-size: 1.2rem;
    color: var(--ink-deep);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin: 0;
}

.section-title-right {
    display: flex;
    align-items: center;
}

.appointment-count {
    font-size: 0.92rem;
    color: var(--ink-secondary);
    font-weight: 600;
}

.refresh-records-btn {
    font-size: 0.9rem;
    color: var(--bamboo-green);
    min-height: 40px;
}

.appointment-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

/* 预约卡片 (Appointment Record Card) */
.appointment-card {
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-paper-strong);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-ground);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.appointment-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.appointment-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gold-ochre);
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.appointment-card.status-approved::before {
    background: var(--bamboo-green);
}

.appointment-card.status-rejected::before {
    background: var(--seal-vermilion);
}

.appointment-card.status-deferred::before {
    background: var(--mountain-indigo);
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.card-top-row-compact {
    margin-bottom: 0;
}

.visit-date-badge {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink-deep);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-tabular);
}

/* 状态标签 (Status Badges) */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.status-badge-approved {
    background: var(--bamboo-green-soft);
    color: var(--bamboo-green-hover);
    border: 1px solid var(--bamboo-green-border);
}

.status-badge-pending {
    background: var(--gold-ochre-soft);
    color: var(--gold-ochre);
    border: 1px solid var(--gold-ochre-border);
}

.status-badge-rejected {
    background: var(--seal-vermilion-soft);
    color: var(--seal-vermilion);
    border: 1px solid var(--seal-vermilion-border);
}

.status-badge-deferred {
    background: var(--mountain-indigo-soft);
    color: var(--mountain-indigo);
    border: 1px solid var(--mountain-indigo-border);
}

.card-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
    font-size: 0.92rem;
    margin-bottom: 14px;
    line-height: 1.5;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-label {
    color: var(--ink-muted);
    font-size: 0.82rem;
    margin-bottom: 2px;
}

.detail-value {
    color: var(--ink-deep);
    font-weight: 600;
    word-break: break-all;
}

.card-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ink-faint);
    flex-wrap: wrap;
}

.pass-url-link-btn {
    flex: 1;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 44px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--bamboo-green);
    background: var(--bamboo-green-soft);
    border: 1px solid var(--bamboo-green-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: none;
    box-sizing: border-box;
}

.pass-url-link-btn:hover {
    background: var(--bamboo-green);
    color: white;
}

.show-qrcode-btn {
    flex: 1;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 44px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink-deep);
    background: var(--gold-ochre-soft);
    border: 1px solid var(--gold-ochre-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: none;
    box-sizing: border-box;
}

.show-qrcode-btn:hover {
    background: var(--gold-ochre);
    color: white;
}

/* 首条有效预约直接展开出示二维码 (Active Pass Auto-Expanded Card) */
.appointment-card.active-pass-card {
    border: 1.5px solid var(--bamboo-green);
    background: var(--bg-paper-light);
    box-shadow: 0 4px 18px rgba(72, 115, 82, 0.12);
    padding: 22px 24px;
}

.inline-pass-expand-section {
    background: linear-gradient(180deg, var(--bamboo-green-soft) 0%, rgba(72, 115, 82, 0.04) 100%);
    border: 1px solid var(--bamboo-green-border);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    margin-top: 14px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

.inline-pass-badge {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bamboo-green-hover);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 动态二维码 60s 倒计时与刷新指示栏 (Single-Row Dynamic QR Countdown & Refresh) */
.qr-refresh-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bamboo-green-soft);
    border: 1px solid var(--bamboo-green-border);
    border-radius: var(--radius-pill);
    padding: 3px 14px;
    font-size: 0.86rem;
    color: var(--bamboo-green);
    margin: 0 auto 12px;
    box-sizing: border-box;
}

.qr-countdown-digits {
    font-family: var(--font-tabular);
    font-weight: 700;
    color: var(--seal-vermilion);
    letter-spacing: 0.5px;
    font-size: 0.94rem;
}

.qr-bar-sep {
    color: var(--bamboo-green-border);
    font-weight: bold;
    opacity: 0.8;
}

.manual-refresh-qr-link {
    color: var(--bamboo-green);
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: var(--transition-fast);
}

.manual-refresh-qr-link:hover {
    color: var(--seal-vermilion);
    text-decoration: underline;
}

.inline-qr-box {
    display: inline-block;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid var(--bamboo-green-border);
    border-radius: var(--radius-md);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
    box-sizing: border-box;
}

.inline-qr-img {
    width: 160px;
    height: 160px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.inline-pass-hint {
    font-size: 0.85rem;
    color: var(--ink-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.inline-pass-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 循环加载更多控制栏 */
.appointment-load-more-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 6px;
    margin-top: 14px;
}

.load-more-appt-btn {
    background: var(--gold-ochre-soft);
    color: var(--ink-deep);
    border: 1px solid var(--gold-ochre-border);
    border-radius: var(--radius-sm);
    padding: 10px 24px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    touch-action: manipulation;
}

.load-more-appt-btn:hover {
    background: var(--gold-ochre);
    color: white;
    box-shadow: var(--shadow-sm);
}

.load-more-ended-text {
    font-size: 0.88rem;
    color: var(--ink-muted);
    padding: 8px 12px;
}

/* 分页控制栏 (兼容保留) */
.appointment-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 6px;
    margin-top: 14px;
    border-top: 1px solid var(--ink-faint);
}

.page-nav-btn {
    background: var(--gold-ochre-soft);
    color: var(--ink-deep);
    border: 1px solid var(--gold-ochre-border);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    touch-action: manipulation;
}

.page-nav-btn:hover:not(:disabled) {
    background: var(--gold-ochre);
    color: white;
}

.page-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-indicator {
    font-size: 0.88rem;
    color: var(--ink-secondary);
    font-weight: 500;
    font-family: var(--font-tabular);
}

/* 空状态与加载状态 */
.appointment-empty,
.appointment-loading {
    text-align: center;
    padding: 40px 16px;
}

.empty-seal {
    width: 48px;
    height: 48px;
    line-height: 46px;
    margin: 0 auto 12px;
    border: 2px dashed var(--gold-ochre);
    color: var(--gold-ochre);
    font-size: 1.3rem;
    border-radius: 50%;
}

.empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink-deep);
    margin-bottom: 6px;
}

.empty-desc {
    font-size: 0.9rem;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gold-ochre-soft);
    border-top-color: var(--seal-vermilion);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

/* ==========================================================================
   校门通行二维码弹窗 (QR Code Modal)
   ========================================================================== */

.qrcode-modal-card {
    max-width: 400px;
    width: 100%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.qrcode-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.qrcode-meta-box {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 320px;
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-paper);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    margin: 0 auto 14px;
    box-sizing: border-box;
}

.qrcode-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qrcode-meta-item .meta-label {
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.qrcode-meta-item .meta-val {
    font-size: 1.05rem;
    color: var(--ink-deep);
    margin-top: 2px;
    font-family: var(--font-tabular);
}

.qrcode-box-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: #FFFFFF;
    border: 1.5px solid var(--gold-ochre);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised);
    margin: 0 auto 16px;
    box-sizing: border-box;
}

.qrcode-box {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
}

.qrcode-img {
    width: 100%;
    height: 100%;
    max-width: 220px;
    max-height: 220px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.qrcode-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-muted);
    font-size: 0.88rem;
    margin: 0 auto;
}

.qrcode-instructions {
    margin-bottom: 16px;
}

.instruction-main {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink-deep);
    margin-bottom: 4px;
}

.instruction-sub {
    font-size: 0.84rem;
    color: var(--ink-secondary);
}

.pass-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    min-height: 44px;
    background: var(--bamboo-green-soft);
    color: var(--bamboo-green);
    border: 1px solid var(--bamboo-green-border);
    border-radius: var(--radius-sm);
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-fast);
}

.pass-link-btn:hover {
    background: var(--bamboo-green);
    color: white;
}

/* ==========================================================================
   超级管理员控制台 (Admin Control Panel)
   ========================================================================== */

.admin-modal-card {
    max-width: 600px;
}

.admin-seal {
    border-color: var(--gold-ochre);
    color: var(--gold-ochre);
    background: var(--gold-ochre-soft);
}

.admin-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--ink-faint);
}

.admin-identity {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-deep);
}

.admin-sections-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 65vh;
    max-height: calc(65dvh - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.admin-section-block {
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-paper-strong);
    border-radius: var(--radius-md);
    padding: 18px;
}

.admin-section-header {
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ink-faint);
    padding-bottom: 8px;
}

.admin-section-header h3 {
    font-size: 1.05rem;
    color: var(--ink-deep);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.admin-form-content {
    display: flex;
    flex-direction: column;
}

.admin-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.admin-btn {
    width: auto;
    max-width: none;
    padding: 10px 18px;
    min-height: 44px;
    font-size: 0.95rem;
}

/* 开关组件 (Toggle Switch) */
.toggle-row-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.toggle-text-wrap strong {
    display: block;
    color: var(--ink-deep);
    font-size: 0.95rem;
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ink-faint);
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 26px;
}

.switch-toggle .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch-toggle input:checked + .slider {
    background-color: var(--bamboo-green);
}

.switch-toggle input:checked + .slider:before {
    transform: translateX(22px);
}

/* 探测结果卡片 (Probe Result Card) */
.probe-result-card {
    background: var(--bg-paper-light);
    border: 1px solid var(--border-paper-strong);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-top: 12px;
}

.probe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.probe-status-badge {
    font-size: 0.88rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.probe-status-badge.healthy {
    background: var(--bamboo-green-soft);
    color: var(--bamboo-green-hover);
}

.probe-status-badge.unhealthy {
    background: var(--seal-vermilion-soft);
    color: var(--seal-vermilion);
}

.probe-latency {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-secondary);
    font-family: var(--font-tabular);
}

.probe-msg {
    font-size: 0.82rem;
    color: var(--ink-secondary);
    word-break: break-all;
}

/* 假日通知横幅 */
.holiday-banner {
    background: linear-gradient(135deg, var(--seal-vermilion), var(--seal-vermilion-hover));
    color: white;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(189, 49, 36, 0.2);
    font-size: 0.95rem;
    line-height: 1.5;
    animation: fadeInDown 0.6s ease-out;
    display: flex;
    align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 1000px; 
    box-sizing: border-box;
}

.holiday-banner i {
    margin-right: 10px;
    font-style: normal;
    font-size: 1.2rem;
    margin-top: -2px;
}

/* 页脚备案信息 (Footer) */
.footer {
    width: 100%;
    text-align: center;
    padding: 20px 0 max(36px, calc(20px + env(safe-area-inset-bottom, 0px)));
    font-size: 0.82rem;
    color: var(--ink-muted);
    letter-spacing: 1px;
    z-index: 10;
}

.footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--seal-vermilion);
}

/* ==========================================================================
   响应式断点深度适配 (Responsive Breakpoints & Mobile Optimization)
   ========================================================================== */

/* 桌面端适配 (Desktop > 768px) */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        align-items: flex-start;
        max-width: 1000px;
        padding-top: 20px;
    }

    .form-container {
        flex: 1.4;
    }

    .info-container {
        flex: 1;
        position: sticky;
        top: 20px;
    }

    .header h1 {
        font-size: 3rem;
    }

    .header .subtitle {
        font-size: 1.2rem;
    }

    button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(189, 49, 36, 0.35);
    }
}

/* 移动端深度优先适配 (Mobile <= 768px) */
@media (max-width: 768px) {
    /* 强制移动端输入框字号 >= 16px，防止 iOS WebKit 自动缩放 */
    input, select, textarea, .input-wrapper input, .pipeline-date-input {
        font-size: 16px !important;
    }

    .container {
        flex-direction: column;
        padding: 0 8px;
        gap: 18px;
    }

    .form-container,
    .info-container,
    .member-dashboard-card {
        padding: 24px 18px;
    }

    .user-status-container {
        padding: 6px 14px;
        font-size: 0.88rem;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 6px;
    }

    .modal-overlay {
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-card {
        margin: auto 0;
        width: 100%;
        padding: 22px 16px;
    }

    .pipeline-booking-form {
        flex-direction: column;
        align-items: stretch;
    }

    .pipeline-submit-btn {
        width: 100%;
        padding: 12px;
    }

    .pipeline-qr-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .pipeline-qr-box {
        margin: 0 auto;
    }

    .card-actions-row {
        flex-direction: column;
    }

    .auth-tab {
        font-size: 0.88rem;
        padding: 8px 2px;
    }

    .button-container button,
    .auth-submit-btn {
        min-height: 48px;
        font-size: 1.05rem;
    }

    .input-wrapper input {
        min-height: 44px;
    }

    .plate-inputs-container {
        gap: 4px;
    }

    .plate-input-box {
        min-height: 44px;
        font-size: 1.05rem;
    }

    .page-nav-btn {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* 小屏特调 (Small Screens <= 480px) */
@media (max-width: 480px) {
    .header h1 {
        font-size: 1.7rem;
    }

    .header .subtitle {
        font-size: 0.92rem;
    }

    .modal-header .modal-title {
        font-size: 1.25rem;
    }

    .card-details-grid {
        grid-template-columns: 1fr;
    }

    .appointment-toolbar,
    .member-vip-banner,
    .section-title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .admin-btn-row {
        flex-direction: column;
    }

    .admin-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Alibaba Cloud Graphical Captcha 4.0 Layering & Touch Optimization
   ========================================================================== */

.aliyun-captcha-mask,
.aliyun-captcha-popup,
div[class*="aliyun-captcha"],
div[class*="ct4-"] {
    z-index: 2000 !important;
}

.send-sms-btn,
.aliyun-captcha-popup {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}