/* _content/VIsitorSystem.CodeBuddy.Net/Pages/Appointment.razor.rz.scp.css */
/* 访客预约页面样式 - 专门针对手机端优化 */

/* ========== 页面容器 ========== */
.appointment-container[b-74wrf136ym] {
    /* 容器最大宽度，确保在手机上不会太宽 */
    max-width: 100%;
    /* 内边距，适应手机屏幕 */
    padding: 16px;
    /* 字体大小，优先使用相对单位便于缩放 */
    font-size: 16px;
    /* 行高，提升阅读体验 */
    line-height: 1.6;
    /* 背景色 */
    background-color: #f5f5f5;
    /* 最小高度，确保内容撑满屏幕 */
    min-height: 100vh;
    /* 使用Flexbox，方便内容垂直排列 */
    display: flex;
    /* 垂直排列 */
    flex-direction: column;
    /* 容器内元素间隔 */
    gap: 16px;
}

/* ========== 页面头部 ========== */
.page-header[b-74wrf136ym] {
    /* 背景色 */
    background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
    /* 圆角 */
    border-radius: 12px;
    /* 内边距 */
    padding: 24px 20px;
    /* 文字颜色 */
    color: white;
    /* 阴影效果 */
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.page-header h1[b-74wrf136ym] {
    /* 标题大小 */
    font-size: 24px;
    /* 去除默认margin */
    margin: 0;
    /* 标题粗细 */
    font-weight: 600;
    /* 标题间距 */
    margin-bottom: 8px;
}

.page-header .subtitle[b-74wrf136ym] {
    /* 副标题大小 */
    font-size: 14px;
    /* 透明度，降低视觉权重 */
    opacity: 0.9;
    /* 去除默认margin */
    margin: 0;
}

/* ========== 悬浮提示框样式（固定在页面顶部，缩小版） ========== */
.toast-container[b-74wrf136ym] {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: calc(100% - 24px);
    max-width: 360px;
}

.alert[b-74wrf136ym] {
    /* Flexbox布局 */
    display: flex;
    /* 垂直居中 */
    align-items: flex-start;
    /* 间距 */
    gap: 8px;
    /* 内边距 - 缩小 */
    padding: 10px 12px;
    /* 圆角 */
    border-radius: 6px;
    /* 文字大小 - 缩小 */
    font-size: 12px;
    /* 阴影 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    /* 动画 */
    animation: slideDown-b-74wrf136ym 0.3s ease;
}

/* 滑入动画 */
@keyframes slideDown-b-74wrf136ym {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 错误提示 */
.alert-error[b-74wrf136ym] {
    /* 背景色 */
    background-color: #fff2f0;
    /* 边框 */
    border: 1px solid #ffccc7;
    /* 文字颜色 */
    color: #cf1322;
}

/* 成功提示 */
.alert-success[b-74wrf136ym] {
    /* 背景色 */
    background-color: #f6ffed;
    /* 边框 */
    border: 1px solid #b7eb8f;
    /* 文字颜色 */
    color: #389e0d;
}

.alert-icon[b-74wrf136ym] {
    /* 图标大小 */
    font-size: 16px;
    /* 防止图标缩放 */
    flex-shrink: 0;
}

.alert-content[b-74wrf136ym] {
    /* 占满剩余空间 */
    flex: 1;
}

.alert-content strong[b-74wrf136ym] {
    /* 标题样式 */
    display: block;
    /* 粗体 */
    font-weight: 600;
    /* 间距 */
    margin-bottom: 2px;
}

.alert-content p[b-74wrf136ym] {
    /* 段落间距 */
    margin: 2px 0;
}

.alert-content small[b-74wrf136ym] {
    /* 辅助文字颜色 */
    color: #8c8c8c;
    /* 显示为块级元素 */
    display: block;
    /* 上边距 */
    margin-top: 2px;
}

.alert-close[b-74wrf136ym] {
    /* 关闭按钮样式 */
    background: none;
    /* 无边框 */
    border: none;
    /* 字体大小 */
    font-size: 16px;
    /* 颜色 */
    color: inherit;
    /* 透明度 */
    opacity: 0.6;
    /* 鼠标样式 */
    cursor: pointer;
    /* 内边距 */
    padding: 0 2px;
}

.alert-close:hover[b-74wrf136ym] {
    /* 悬停效果 */
    opacity: 1;
}

/* ========== 模态弹窗样式 ========== */
.modal-overlay[b-74wrf136ym] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-74wrf136ym 0.2s ease;
}

@keyframes fadeIn-b-74wrf136ym {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog[b-74wrf136ym] {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    width: calc(100% - 48px);
    max-width: 300px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-74wrf136ym 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp-b-74wrf136ym {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-icon-wrapper[b-74wrf136ym] {
    padding: 28px 0 16px;
    text-align: center;
}

.modal-icon[b-74wrf136ym] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.modal-icon.success[b-74wrf136ym] {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    box-shadow: 0 8px 24px rgba(82, 196, 26, 0.4);
}

.modal-icon.error[b-74wrf136ym] {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    box-shadow: 0 8px 24px rgba(255, 77, 79, 0.4);
}

.modal-title[b-74wrf136ym] {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    text-align: center;
}

.modal-body[b-74wrf136ym] {
    padding: 12px 24px 20px;
    text-align: center;
    color: #595959;
    font-size: 14px;
    line-height: 1.6;
}

.modal-body p[b-74wrf136ym] {
    margin: 0;
}

.modal-body small[b-74wrf136ym] {
    display: block;
    color: #8c8c8c;
    font-size: 12px;
    margin-top: 8px;
    word-break: break-all;
}

.modal-footer[b-74wrf136ym] {
    border-top: 1px solid #f0f0f0;
}

.modal-btn[b-74wrf136ym] {
    width: 100%;
    padding: 16px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn-confirm[b-74wrf136ym] {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    color: white;
}

.modal-btn-confirm:hover[b-74wrf136ym] {
    background: linear-gradient(135deg, #40a9ff 0%, #69c0ff 100%);
}

.modal-btn-confirm:active[b-74wrf136ym] {
    transform: scale(0.98);
}

.alert-icon[b-74wrf136ym] {
    /* 图标大小 */
    font-size: 20px;
    /* 防止图标缩放 */
    flex-shrink: 0;
}

.alert-content[b-74wrf136ym] {
    /* 占满剩余空间 */
    flex: 1;
}

.alert-content strong[b-74wrf136ym] {
    /* 标题样式 */
    display: block;
    /* 粗体 */
    font-weight: 600;
    /* 间距 */
    margin-bottom: 4px;
}

.alert-content p[b-74wrf136ym] {
    /* 段落间距 */
    margin: 4px 0;
}

.alert-content small[b-74wrf136ym] {
    /* 辅助文字颜色 */
    color: #8c8c8c;
    /* 显示为块级元素 */
    display: block;
    /* 上边距 */
    margin-top: 4px;
}

.alert-close[b-74wrf136ym] {
    /* 关闭按钮样式 */
    background: none;
    /* 无边框 */
    border: none;
    /* 字体大小 */
    font-size: 18px;
    /* 颜色 */
    color: inherit;
    /* 透明度 */
    opacity: 0.6;
    /* 鼠标样式 */
    cursor: pointer;
    /* 内边距 */
    padding: 0 4px;
}

.alert-close:hover[b-74wrf136ym] {
    /* 悬停效果 */
    opacity: 1;
}

/* ========== 表单卡片 ========== */
.form-card[b-74wrf136ym] {
    /* 白色背景 */
    background-color: white;
    /* 圆角 */
    border-radius: 12px;
    /* 内边距 */
    padding: 20px;
    /* 阴影 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ========== 表单组 ========== */
.form-group[b-74wrf136ym] {
    /* 底部间距 */
    margin-bottom: 20px;
}

.form-group.half[b-74wrf136ym] {
    /* 一行两个时的宽度 */
    width: calc(50% - 10px);
}

/* 一行两列布局 */
.form-row[b-74wrf136ym] {
    /* Flexbox */
    display: flex;
    /* 换行 */
    flex-wrap: wrap;
    /* 元素间间距 */
    gap: 16px;
    /* 左右两边不超出 */
    margin-left: -4px;
    margin-right: -4px;
}

/* 时间输入框样式优化，确保宽度与上方输入框一致 */
.form-row input[type="datetime-local"].form-input[b-74wrf136ym] {
    width: 100%;
    min-width: 100%;
}

/* 时间选择器所在的 form-group 样式 */
.form-row .form-group[b-74wrf136ym] {
    flex: 1;
    min-width: 0;
}

/* 确保输入框和datetime-local宽度一致 - 使用更高优先级 */
.form-card input.form-input[b-74wrf136ym],
.form-card select.form-input[b-74wrf136ym],
.form-card textarea.form-input[b-74wrf136ym],
.form-group input[b-74wrf136ym],
.form-group select[b-74wrf136ym],
.form-group textarea[b-74wrf136ym] {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ========== 表单标签 ========== */
.form-label[b-74wrf136ym] {
    /* 块级显示 */
    display: block;
    /* 标签粗细 */
    font-weight: 500;
    /* 标签颜色 */
    color: #333;
    /* 间距 */
    margin-bottom: 8px;
    /* 标签大小 */
    font-size: 15px;
}

.form-label .label-icon[b-74wrf136ym] {
    /* Emoji图标大小 */
    font-size: 16px;
    /* 右侧间距 */
    margin-right: 6px;
}

.form-label .required[b-74wrf136ym]::after {
    /* 必填标识 */
    content: " *";
    /* 红色 */
    color: #ff4d4f;
    /* 去除粗体 */
    font-weight: normal;
}

.form-label .optional[b-74wrf136ym] {
    /* 选填提示样式 */
    font-size: 12px;
    /* 灰色 */
    color: #999;
    /* 正常粗细 */
    font-weight: normal;
    /* 左边距 */
    margin-left: 4px;
}

/* ========== 输入框样式 ========== */
.form-input[b-74wrf136ym] {
    /* 宽度100% */
    width: 100%;
    /* 盒子尺寸计算方式 */
    box-sizing: border-box;
    /* 内边距 */
    padding: 12px 14px;
    /* 边框 */
    border: 1px solid #d9d9d9;
    /* 圆角 */
    border-radius: 6px;
    /* 字体大小 */
    font-size: 16px; /* 手机上使用16px防止iOS自动缩放 */
    /* 字体颜色 */
    color: #333;
    /* 过渡效果 */
    transition: all 0.3s ease;
    /* 去除默认轮廓 */
    outline: none;
    /* 背景色 */
    background-color: #fff;
}

/* 输入框聚焦状态 */
.form-input:focus[b-74wrf136ym] {
    /* 边框颜色 */
    border-color: #1890ff;
    /* 阴影 */
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 输入框占位符样式 */
.form-input[b-74wrf136ym]::placeholder {
    /* 占位符颜色 */
    color: #bfbfbf;
}

/* 文本域特殊样式 */
.form-textarea[b-74wrf136ym] {
    /* 允许调整高度 */
    resize: vertical;
    /* 最小高度 */
    min-height: 80px;
}

/* ========== 验证消息 ========== */
.validation-message[b-74wrf136ym] {
    /* 验证消息样式 */
    color: #ff4d4f;
    /* 字体大小 */
    font-size: 12px;
    /* 间距 */
    margin-top: 4px;
    /* 显示为块级元素 */
    display: block;
}

/* ========== 提示文字 ========== */
.form-hint[b-74wrf136ym] {
    /* 辅助提示样式 */
    color: #999;
    /* 字体大小 */
    font-size: 12px;
    /* 间距 */
    margin-top: 4px;
    /* 显示为块级元素 */
    display: block;
}

/* ========== 按钮样式 ========== */
.form-actions[b-74wrf136ym] {
    /* 上下间距 */
    margin-top: 24px;
    margin-bottom: 16px;
}

/* 提交按钮 */
.btn-submit[b-74wrf136ym] {
    /* 宽度100% */
    width: 100%;
    /* 内边距 */
    padding: 14px 24px;
    /* 背景色 */
    background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
    /* 文字颜色 */
    color: white;
    /* 无边框 */
    border: none;
    /* 圆角 */
    border-radius: 8px;
    /* 字体大小 */
    font-size: 17px;
    /* 粗体 */
    font-weight: 600;
    /* 鼠标样式 */
    cursor: pointer;
    /* Flexbox居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 间距 */
    gap: 8px;
    /* 过渡效果 */
    transition: all 0.3s ease;
    /* 去除默认阴影 */
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

/* 提交按钮悬停 */
.btn-submit:hover:not(:disabled)[b-74wrf136ym] {
    /* 悬停时上移 */
    transform: translateY(-2px);
    /* 增强阴影 */
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
}

/* 提交按钮点击 */
.btn-submit:active:not(:disabled)[b-74wrf136ym] {
    /* 点击时恢复 */
    transform: translateY(0);
}

/* 提交按钮禁用状态 */
.btn-submit:disabled[b-74wrf136ym] {
    /* 禁用时样式 */
    background: #d9d9d9;
    cursor: not-allowed;
    box-shadow: none;
}

/* 加载中按钮 */
.btn-loading[b-74wrf136ym] {
    /* 加载中样式 */
    pointer-events: none;
}

/* 旋转动画 */
.spinner[b-74wrf136ym] {
    /* 旋转动画 */
    animation: spin-b-74wrf136ym 1s linear infinite;
    /* 宽高 */
    width: 18px;
    height: 18px;
    /* 边框 */
    border: 2px solid rgba(255, 255, 255, 0.3);
    /* 顶部边框颜色 */
    border-top-color: white;
    /* 圆形 */
    border-radius: 50%;
}

@keyframes spin-b-74wrf136ym {
    /* 旋转动画定义 */
    to {
        transform: rotate(360deg);
    }
}

/* 重置按钮 */
.btn-reset[b-74wrf136ym] {
    /* 重置按钮样式 */
    width: 100%;
    /* 内边距 */
    padding: 12px 24px;
    /* 背景色 */
    background-color: white;
    /* 边框 */
    border: 1px solid #d9d9d9;
    /* 圆角 */
    border-radius: 8px;
    /* 字体大小 */
    font-size: 15px;
    /* 颜色 */
    color: #666;
    /* 鼠标样式 */
    cursor: pointer;
    /* 过渡效果 */
    transition: all 0.3s ease;
}

/* 重置按钮悬停 */
.btn-reset:hover[b-74wrf136ym] {
    /* 悬停时边框颜色 */
    border-color: #1890ff;
    /* 文字颜色 */
    color: #1890ff;
}

/* ========== 预约须知 ========== */
.tips-section[b-74wrf136ym] {
    /* 背景色 */
    background-color: white;
    /* 圆角 */
    border-radius: 12px;
    /* 内边距 */
    padding: 20px;
    /* 阴影 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tips-section h3[b-74wrf136ym] {
    /* 标题样式 */
    font-size: 16px;
    /* 粗体 */
    font-weight: 600;
    /* 颜色 */
    color: #333;
    /* 间距 */
    margin: 0 0 12px 0;
}

.tips-section ul[b-74wrf136ym] {
    /* 无序列表样式 */
    list-style: none;
    /* 去除默认padding */
    padding: 0;
    /* 间距 */
    margin: 0;
}

.tips-section li[b-74wrf136ym] {
    /* 列表项样式 */
    font-size: 14px;
    /* 颜色 */
    color: #666;
    /* 间距 */
    margin-bottom: 8px;
    /* padding-left实现列表标记 */
    padding-left: 20px;
    /* position实现自定义标记 */
    position: relative;
}

/* 自定义列表标记 */
.tips-section li[b-74wrf136ym]::before {
    /* 圆点标记 */
    content: "•";
    /* 颜色 */
    color: #1890ff;
    /* 粗体 */
    font-weight: bold;
    /* 定位 */
    position: absolute;
    /* 左边距 */
    left: 6px;
}

/* ========== 底部信息 ========== */
.footer-info[b-74wrf136ym] {
    /* 底部信息样式 */
    text-align: center;
    /* 间距 */
    padding: 16px;
    /* 字体大小 */
    font-size: 13px;
    /* 颜色 */
    color: #999;
}

.footer-info p[b-74wrf136ym] {
    /* 段落样式 */
    margin: 4px 0;
}

/* ========== 响应式设计 ========== */

/* 小屏幕手机（宽度小于576px） */
@media (max-width: 576px) {
    .appointment-container[b-74wrf136ym] {
        /* 减小内边距 */
        padding: 12px;
    }

    .page-header[b-74wrf136ym] {
        /* 减小头部内边距 */
        padding: 20px 16px;
    }

    .page-header h1[b-74wrf136ym] {
        /* 减小标题大小 */
        font-size: 22px;
    }

    .form-card[b-74wrf136ym] {
        /* 减小卡片内边距 */
        padding: 16px;
    }

    /* 一行两列改为一行一列 */
    .form-row[b-74wrf136ym] {
        flex-direction: column;
    }

    .form-group.half[b-74wrf136ym] {
        /* 宽度100% */
        width: 100%;
    }

    .form-label[b-74wrf136ym] {
        /* 减小标签大小 */
        font-size: 14px;
    }

    .btn-submit[b-74wrf136ym] {
        /* 减小按钮内边距 */
        padding: 12px 20px;
        /* 减小字体大小 */
        font-size: 16px;
    }
}

/* 平板设备（宽度576px-768px） */
@media (min-width: 576px) and (max-width: 768px) {
    .appointment-container[b-74wrf136ym] {
        /* 容器最大宽度 */
        max-width: 540px;
        /* 居中 */
        margin: 0 auto;
    }
}

/* 桌面设备（宽度大于768px） */
@media (min-width: 768px) {
    .appointment-container[b-74wrf136ym] {
        /* 容器最大宽度 */
        max-width: 600px;
        /* 居中 */
        margin: 0 auto;
        /* 上边距 */
        margin-top: 20px;
        /* 圆角 */
        border-radius: 12px;
        /* 阴影 */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
}

/* ========== ValidationSummary 样式覆盖 ========== */
.form-card .validation-summary-errors[b-74wrf136ym] {
    /* 验证摘要样式 */
    background-color: #fff2f0;
    /* 边框 */
    border: 1px solid #ffccc7;
    /* 圆角 */
    border-radius: 6px;
    /* 内边距 */
    padding: 12px;
    /* 字体大小 */
    font-size: 14px;
    /* 颜色 */
    color: #cf1322;
    /* 列表样式 */
    list-style: none;
    /* 去除默认padding */
    padding-left: 12px;
}

.form-card .validation-summary-errors ul[b-74wrf136ym] {
    /* 列表样式 */
    margin: 0;
    padding: 0;
}

.form-card .validation-summary-errors li[b-74wrf136ym] {
    /* 列表项样式 */
    margin: 4px 0;
}

/* ========== 查询预约区域 ========== */
.query-section[b-74wrf136ym] {
    /* 背景色 */
    background-color: white;
    /* 圆角 */
    border-radius: 12px;
    /* 内边距 */
    padding: 20px;
    /* 阴影 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.query-section h3[b-74wrf136ym] {
    /* 标题样式 */
    font-size: 16px;
    /* 粗体 */
    font-weight: 600;
    /* 颜色 */
    color: #333;
    /* 间距 */
    margin: 0 0 16px 0;
}

.query-form .form-group[b-74wrf136ym] {
    /* 底部间距 */
    margin-bottom: 0;
}

.query-input-row[b-74wrf136ym] {
    /* Flexbox布局 */
    display: flex;
    /* 间距 */
    gap: 12px;
}

.query-input-row .form-input[b-74wrf136ym] {
    /* 占据剩余空间 */
    flex: 1;
}

.btn-query[b-74wrf136ym] {
    /* 按钮样式 */
    padding: 12px 20px;
    /* 背景色 */
    background-color: #1890ff;
    /* 文字颜色 */
    color: white;
    /* 无边框 */
    border: none;
    /* 圆角 */
    border-radius: 6px;
    /* 字体大小 */
    font-size: 15px;
    /* 粗体 */
    font-weight: 500;
    /* 鼠标样式 */
    cursor: pointer;
    /* 过渡效果 */
    transition: all 0.3s ease;
    /* 白色背景 */
    background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
    /* 阴影 */
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.btn-query:hover:not(:disabled)[b-74wrf136ym] {
    /* 悬停效果 */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.btn-query:disabled[b-74wrf136ym] {
    /* 禁用状态 */
    background: #d9d9d9;
    cursor: not-allowed;
    box-shadow: none;
}

/* 小旋转动画 */
.spinner-small[b-74wrf136ym] {
    /* 旋转动画 */
    animation: spin-b-74wrf136ym 1s linear infinite;
    /* 宽高 */
    width: 16px;
    height: 16px;
    /* 边框 */
    border: 2px solid rgba(255, 255, 255, 0.3);
    /* 顶部边框颜色 */
    border-top-color: white;
    /* 圆形 */
    border-radius: 50%;
    /* 内联显示 */
    display: inline-block;
}

/* 查询结果为空 */
.query-empty[b-74wrf136ym] {
    /* 居中对齐 */
    text-align: center;
    /* 内边距 */
    padding: 24px;
    /* 颜色 */
    color: #999;
    /* 字体大小 */
    font-size: 14px;
}

/* 查询结果列表 */
.query-results h4[b-74wrf136ym] {
    /* 标题样式 */
    font-size: 14px;
    /* 颜色 */
    color: #666;
    /* 粗体 */
    font-weight: 500;
    /* 间距 */
    margin: 16px 0 12px 0;
}

/* 结果卡片 */
.result-card[b-74wrf136ym] {
    /* 背景色 */
    background-color: #fafafa;
    /* 圆角 */
    border-radius: 8px;
    /* 内边距 */
    padding: 16px;
    /* 边框 */
    border: 1px solid #f0f0f0;
    /* 底部间距 */
    margin-bottom: 12px;
}

.result-card.cancelled[b-74wrf136ym] {
    /* 已取消状态 */
    opacity: 0.6;
}

.result-header[b-74wrf136ym] {
    /* Flexbox布局 */
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    /* 垂直居中 */
    align-items: center;
    /* 底部间距 */
    margin-bottom: 12px;
}

.result-id[b-74wrf136ym] {
    /* 预约ID样式 */
    font-size: 13px;
    /* 颜色 */
    color: #999;
}

.status-badge[b-74wrf136ym] {
    /* 状态标签样式 */
    font-size: 12px;
    /* 内边距 */
    padding: 2px 8px;
    /* 圆角 */
    border-radius: 4px;
}

.status-active[b-74wrf136ym] {
    /* 有效状态 */
    background-color: #f6ffed;
    color: #52c41a;
}

.status-expired[b-74wrf136ym] {
    /* 已过期状态 */
    background-color: #fffbe6;
    color: #faad14;
}

.status-cancelled[b-74wrf136ym] {
    /* 已取消状态 */
    background-color: #f5f5f5;
    color: #999;
}

.result-body[b-74wrf136ym] {
    /* 结果内容 */
    font-size: 14px;
}

.result-row[b-74wrf136ym] {
    /* 结果行 */
    display: flex;
    /* 换行 */
    flex-wrap: wrap;
    /* 底部间距 */
    margin-bottom: 6px;
}

.result-label[b-74wrf136ym] {
    /* 标签样式 */
    color: #666;
    /* 最小宽度 */
    min-width: 80px;
}

.result-value[b-74wrf136ym] {
    /* 值样式 */
    color: #333;
    /* 粗体 */
    font-weight: 500;
}

.result-actions[b-74wrf136ym] {
    /* 操作按钮区域 */
    margin-top: 12px;
    /* 顶部边框 */
    border-top: 1px solid #eee;
    /* 内边距 */
    padding-top: 12px;
}

.btn-cancel[b-74wrf136ym] {
    /* 取消按钮 */
    padding: 8px 16px;
    /* 背景色 */
    background-color: white;
    /* 边框 */
    border: 1px solid #ff4d4f;
    /* 圆角 */
    border-radius: 4px;
    /* 字体大小 */
    font-size: 13px;
    /* 颜色 */
    color: #ff4d4f;
    /* 鼠标样式 */
    cursor: pointer;
    /* 过渡效果 */
    transition: all 0.3s ease;
}

.btn-cancel:hover[b-74wrf136ym] {
    /* 悬停效果 */
    background-color: #ff4d4f;
    color: white;
}
/* _content/VIsitorSystem.CodeBuddy.Net/Shared/MainLayout.razor.rz.scp.css */
.page[b-g7yjszzvlh] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-g7yjszzvlh] {
    flex: 1;
}

.sidebar[b-g7yjszzvlh] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-g7yjszzvlh] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-g7yjszzvlh]  a, .top-row .btn-link[b-g7yjszzvlh] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-g7yjszzvlh] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-g7yjszzvlh] {
        display: none;
    }

    .top-row.auth[b-g7yjszzvlh] {
        justify-content: space-between;
    }

    .top-row a[b-g7yjszzvlh], .top-row .btn-link[b-g7yjszzvlh] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-g7yjszzvlh] {
        flex-direction: row;
    }

    .sidebar[b-g7yjszzvlh] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-g7yjszzvlh] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-g7yjszzvlh], article[b-g7yjszzvlh] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/VIsitorSystem.CodeBuddy.Net/Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-67xl58ba4l] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-67xl58ba4l] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-67xl58ba4l] {
    font-size: 1.1rem;
}

.oi[b-67xl58ba4l] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-67xl58ba4l] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-67xl58ba4l] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-67xl58ba4l] {
        padding-bottom: 1rem;
    }

    .nav-item[b-67xl58ba4l]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-67xl58ba4l]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-67xl58ba4l]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-67xl58ba4l] {
        display: none;
    }

    .collapse[b-67xl58ba4l] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}