/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #0a1628 0%, #1a2845 50%, #0d1f3c 100%);
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 监控页布局 */
.monitor-container {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
    gap: 10px;
    padding: 10px 60px;
    /* 左右留出 60px 间距 */
    grid-template-areas:
        "header"
        "content";
    /* 参考示意图的浅色配色 */
    background: linear-gradient(135deg, #eef6ff 0%, #e6f3ff 50%, #eef7ff 100%);
    color: #1f2f44;
}

.monitor-header {
    grid-area: header;
    padding-left: 0;
}

.monitor-header .left-controls {
    left: 0;
}

/* 与患者卡片左侧齐平 */
.monitor-header .title {
    color: transparent;
    background: linear-gradient(90deg, #2f5fae 0%, #4a9eff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.monitor-header::before,
.monitor-header::after {
    content: none;
}

.monitor-header .right-controls .user-name,
.monitor-header .right-controls .user-caret {
    color: #4a5a72;
}

.monitor-header .dept-select label {
    color: #4a5a72;
}

.monitor-header .dept-select select {
    color: #1f2f44;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(74, 158, 255, 0.35);
}

.monitor-content {
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 360px;
    /* 左侧卡片区、右侧模块区 */
    gap: 12px;
    align-items: start;
}

.monitor-right>.panel {
    margin-bottom: 12px;
}

/* 顶部左侧控件：侧边栏按钮 + 当前时间 */
.header .sidebar-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #4a9eff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.monitor-header .sidebar-toggle-btn {
    padding-left: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 18px;
    justify-content: center;
    margin-left: -12px;
}

.monitor-header .sidebar-toggle-btn .btn-icon {
    font-size: 18px;
    line-height: 1;
}

.header .sidebar-toggle-btn:hover {
    background: rgba(74, 158, 255, 0.12);
}

.header .current-time {
    color: #8cb4d8;
    font-size: 13px;
    margin-left: 8px;
}

/* 监控页：当当前时间位于右侧控件内时，移除多余左间距 */
.monitor-header .right-controls .current-time {
    margin-left: 0;
}

/* 患者卡片网格 */
.patient-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    /* 略微增大卡片之间的间距 */
}

.patient-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.patient-card:hover {
    transform: translateY(-2px);
    background: #f9fcff;
}

.patient-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.patient-card .header-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.patient-card .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe 0%, #cfe8ff 100%);
    border: 1px solid #c9def5;
}

.patient-card .emr-id {
    font-size: 12px;
    color: #ffffff;
    background: #4a9eff;
    padding: 4px 8px;
    border-radius: 6px;
}

.patient-card .basic-line {
    color: #40536b;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.patient-card .basic-left {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.patient-card .admit-time {
    color: #40536b;
    font-size: 12px;
    text-align: right;
}

.patient-card .patient-name {
    font-size: 18px;
    font-weight: 700;
    color: #1f2f44;
}

.patient-card .diagnosis {
    background: #f6fbff;
    color: #1f2f44;
    border-radius: 8px;
    padding: 8px;
    margin: 10px 0;
    font-size: 12px;
}

.patient-card .care-line {
    display: flex;
    justify-content: space-between;
    color: #4a5a72;
    font-size: 11px;
}

/* 胎儿期患者卡片特殊样式 */
.patient-card.fetal-patient {
    background: #fdf2f8;
    /* 淡粉色背景 */
}

.patient-card.fetal-patient:hover {
    background: #fce7f3;
    /* 悬停时稍深的粉色 */
}

.patient-card.fetal-patient .emr-id {
    background: #ec4899;
    /* 粉色ID背景 */
    color: #ffffff;
}

/* 右侧模块通用样式复用现有 .panel */
.panel {
    background: rgba(26, 59, 102, 0.30);
    border: 1px solid rgba(74, 158, 255, 0.35);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.panel .panel-header {
    padding: 10px 12px;
    font-weight: 600;
    color: #cfe1f5;
    border-bottom: 1px solid rgba(74, 158, 255, 0.25);
}

.panel .panel-body {
    padding: 10px 12px;
}

.panel .list-item {
    font-size: 13px;
    color: #ffffff;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.panel .list-item:last-child {
    border-bottom: none;
}

/* 监控页侧边栏 */
.monitor-sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    background: rgba(26, 59, 102, 0.3);
    border-right: 2px solid rgba(74, 158, 255, 0.5);
    backdrop-filter: blur(20px);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 920;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.monitor-sidebar.active {
    left: 0;
}

.monitor-sidebar .sidebar-empty {
    color: #8cb4d8;
    padding: 16px;
}

/* 移除监控页模块阴影 */
.monitor-container .panel {
    box-shadow: none;
    background: #ffffff;
    border-color: #e3eef9;
}

.monitor-container .panel .panel-header {
    color: #40536b;
    border-bottom-color: #e3eef9;
}

.monitor-container .panel .list-item {
    color: #1f2f44;
    border-bottom-color: #e8f0fa;
}

/* 页面底部 Footer 模块 */
.page-footer {
    grid-area: footer;
    text-align: center;
    font-size: 12px;
    color: #8cb4d8;
    padding: 10px 0;
    background: transparent;
    border-top: 1px solid rgba(74, 158, 255, 0.2);
    border-radius: 8px;
}

/* 主容器 - 网格布局 */
.container {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr minmax(120px, auto) 40px;
    gap: 10px;
    padding: 10px;
    grid-template-areas:
        "header"
        "center"
        "bottom"
        "footer";
}

/* 顶部标题区域 */
.header {
    grid-area: header;
    text-align: center;
    background: transparent;
    border-radius: 8px;
    padding: 8px;
    position: relative;
    overflow: visible;
    /* 允许下拉菜单溢出显示 */
    z-index: 200;
    /* 提升层级，覆盖模型与侧栏 */
}

/* Header 全宽科技感背景装饰 */
.header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* 渐变与细网格叠加，形成低调科技感背景 */
    background:
        linear-gradient(135deg, rgba(74, 158, 255, 0.10) 0%, rgba(109, 213, 237, 0.10) 100%),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.06) 0px,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px,
            transparent 14px),
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 14px);
}

.header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
            rgba(109, 213, 237, 0) 0%,
            rgba(109, 213, 237, 0.25) 50%,
            rgba(109, 213, 237, 0) 100%);
    filter: blur(8px);
    animation: headerShine 12s linear infinite;
}

@keyframes headerShine {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(200%);
    }
}

/* 保证标题在背景装饰之上 */
.header .title {
    z-index: 1;
    position: relative;
}

/* Header 右侧控件容器 */
.header .right-controls {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    z-index: 1;
}

/* Header 科室选择 */
.header .dept-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header .dept-select label {
    color: #8cb4d8;
    font-size: 14px;
}

.header .dept-select select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(13, 31, 60, 0.9);
    border: 1px solid rgba(74, 158, 255, 0.4);
    color: #ffffff;
    padding: 6px 20px;
    /* 宽度+20px：左右内边距各+10px */
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    outline: none;
    cursor: pointer;
}

.header .dept-select select:hover {
    border-color: rgba(74, 158, 255, 0.6);
}

.header .dept-select select:focus {
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.25);
}

.header .user-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.header .right-controls .user-info {
    position: static;
    transform: none;
}

.header .user-info .user-name {
    color: #8cb4d8;
    font-size: 14px;
}

.header .user-info .user-caret {
    color: #8cb4d8;
    font-size: 12px;
}

.header .user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: rgba(13, 31, 60, 0.9);
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    min-width: 140px;
    padding: 6px;
    display: none;
    z-index: 300;
    /* 确保下拉菜单在最上层 */
}

.header .user-dropdown.open {
    display: block;
}

.header .user-dropdown .dropdown-item {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}

.header .user-dropdown .dropdown-item:hover {
    background: rgba(74, 158, 255, 0.15);
}

.title {
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(90deg, #4a9eff 0%, #6dd5ed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 5px;
    text-shadow: none;
    display: inline-block;
    position: relative;
    padding: 4px 16px;
    /* 为装饰线条留出空间 */
}

/* 标题科技感装饰线条 */
.title::before,
.title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    pointer-events: none;
}

.title::before {
    top: -8px;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(74, 158, 255, 0) 0%,
            rgba(74, 158, 255, 0.6) 15%,
            rgba(109, 213, 237, 0.9) 50%,
            rgba(74, 158, 255, 0.6) 85%,
            rgba(74, 158, 255, 0) 100%);
    box-shadow: none;
}

.title::after {
    bottom: -8px;
    height: 1px;
    background: repeating-linear-gradient(90deg,
            rgba(74, 158, 255, 0.6) 0px,
            rgba(74, 158, 255, 0.6) 28px,
            rgba(74, 158, 255, 0) 32px);
    animation: techLineSlide 12s linear infinite;
    opacity: 0.8;
}

@keyframes techLineSlide {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -64px;
    }
}

.subtitle {
    font-size: 13px;
    color: #8cb4d8;
    opacity: 0.9;
}

/* 左侧面板 - 浮动在模型区域 */
.left-panel {
    position: absolute;
    left: 20px;
    top: 20px;
    /* 向上移动80px */
    width: 350px;
    max-height: calc(100% - 40px);
    overflow-y: auto;
    padding: 15px;
    background: transparent;
    backdrop-filter: none;
    border-radius: 8px;
    border: none;
    z-index: 100;
    box-shadow: none;
}

/* 右侧面板 - 浮动在模型区域 */
.right-panel {
    position: absolute;
    right: 20px;
    top: 20px;
    /* 向上移动80px */
    width: 350px;
    max-height: calc(100% - 40px);
    overflow-y: auto;
    padding: 15px;
    background: transparent;
    backdrop-filter: none;
    border-radius: 8px;
    border: none;
    z-index: 100;
    box-shadow: none;
}

/* 滚动条样式 */
.left-panel,
.right-panel {
    /* 默认隐藏滚动条（Firefox） */
    scrollbar-width: none;
}

.left-panel::-webkit-scrollbar,
.right-panel::-webkit-scrollbar {
    /* 默认隐藏滚动条（WebKit） */
    width: 0;
}

.left-panel::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.left-panel::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb {
    background: #4a9eff;
    /* 滚动条滑块改为蓝色 */
    border-radius: 3px;
}

.left-panel::-webkit-scrollbar-thumb:hover,
.right-panel::-webkit-scrollbar-thumb:hover {
    background: #4a9eff;
    /* 悬停时保持同色，避免背景变化 */
}

/* 悬停轨道不显示背景色 */
.left-panel::-webkit-scrollbar-track:hover,
.right-panel::-webkit-scrollbar-track:hover {
    background: transparent;
}

/* 滚动时显示滚动条 */
.left-panel.scrolling,
.right-panel.scrolling {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(74, 158, 255, 0.6) transparent;
    /* Firefox：半透明蓝色滑块 + 透明轨道 */
}

/* 鼠标进入/滚动时显示的半透明蓝色滑块 */
.left-panel.scrolling::-webkit-scrollbar-thumb,
.right-panel.scrolling::-webkit-scrollbar-thumb {
    background: rgba(74, 158, 255, 0.5);
}

.left-panel.scrolling::-webkit-scrollbar-thumb:hover,
.right-panel.scrolling::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 158, 255, 0.7);
}

.left-panel.scrolling::-webkit-scrollbar,
.right-panel.scrolling::-webkit-scrollbar {
    width: 6px;
    /* WebKit */
}

/* 通用面板样式 */
.panel {
    background: transparent !important;
    border: none;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.panel:last-child {
    margin-bottom: 0;
}

.panel-header {
    font-size: 14px;
    font-weight: bold;
    color: #4a9eff;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: none;
    display: flex;
    align-items: center;
    line-height: 18px;
    /* 与右侧图标高度对齐 */
}

.panel-header::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #4a9eff 0%, #6dd5ed 100%);
    margin-right: 8px;
    border-radius: 2px;
}

/* 面板右侧操作按钮（患者详情） */
.panel-header .panel-action-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #4a9eff;
    border-radius: 4px;
    padding: 0;
    /* 移除额外内边距以垂直居中 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

.panel-header .panel-action-btn:hover {
    background: transparent;
}

.panel-action-btn .btn-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 患者详情sheet操作区 */
.sheet-header {
    position: relative;
}

.sheet-header .sheet-actions {
    display: inline-flex;
    gap: 8px;
    position: absolute;
    right: 72px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

/* 患者详情表单样式 */
.patient-detail-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.patient-detail-form .form-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.patient-detail-form .form-row .label {
    color: #cfe1f5;
    min-width: 84px;
}

.patient-detail-form .form-row input,
.patient-detail-form .form-row select,
.patient-detail-form .form-row textarea {
    flex: 1;
    background: rgba(26, 59, 102, 0.35);
    border: 1px solid rgba(74, 158, 255, 0.35);
    border-radius: 4px;
    color: #e8f1fc;
    padding: 6px 8px;
}

.visit-sheet#patientDetailSheet.is-view .patient-detail-form .form-row input,
.visit-sheet#patientDetailSheet.is-view .patient-detail-form .form-row select,
.visit-sheet#patientDetailSheet.is-view .patient-detail-form .form-row textarea {
    background: transparent;
    border-color: transparent;
}

.visit-sheet#patientDetailSheet.is-view .patient-detail-form .form-row .label {
    color: #cfe1f5;
}

.patient-detail-form .form-row textarea {
    min-height: 64px;
    resize: vertical;
}

.patient-detail-form .form-row input:disabled,
.patient-detail-form .form-row select:disabled,
.patient-detail-form .form-row textarea:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

/* 患者详情底部模块 */
.patient-detail-modules {
    grid-column: 1 / span 2;
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.patient-detail-modules .module-card {
    background: rgba(10, 22, 40, 0.65);
    border: 1px solid rgba(74, 158, 255, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
}

.patient-detail-modules .module-card.highlight {
    border-color: rgba(74, 158, 255, 0.75);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.25) inset;
}

.patient-detail-modules .module-title {
    color: #8cb4d8;
    font-size: 13px;
    margin-bottom: 8px;
}

.patient-detail-modules .module-list .item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #e8f1fc;
    padding: 4px 0;
}

.patient-detail-modules .module-list .item .key {
    min-width: 96px;
    color: #cfe1f5;
}

.patient-detail-modules .module-list .item .val {
    flex: 1;
}


/* 胎儿信息 */
.fetal-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 11px;
    /* 与标题文字对齐（3px竖线 + 8px间距） */
}

/* 面板内容统一右移，与标题左侧对齐 */
.panel> :not(.panel-header) {
    padding-left: 11px;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    /* 纵向堆叠：头像在上，信息在下 */
    gap: 12px;
    align-items: flex-start;
}

.avatar {
    width: 60px;
    height: 60px;
    /* 圆形头像尺寸 60×60 */
    border-radius: 50%;
    /* 圆形头像 */
    overflow: hidden;
    border: 2px solid rgba(74, 158, 255, 0.6);
    flex-shrink: 0;
    background: #4a9eff;
    /* 蓝色填充 */
}

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

.fetal-basic {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-row {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.8;
    flex-wrap: wrap;
}

/* 让需要顶部对齐的行（如居住地）在多行内容时顶端对齐 */
.info-row.align-top {
    align-items: flex-start;
}

.info-row .label {
    color: #8cb4d8;
    white-space: nowrap;
}

.info-row .value {
    color: #ffffff;
    margin-right: 10px;
}

/* 成对标签+值（用于母体健康的同一行多项） */
.info-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-right: 16px;
}

.info-pair .label {
    white-space: nowrap;
    min-width: auto;
    margin-right: 0;
}

.info-pair .value {
    white-space: nowrap;
}

/* 母体健康区域：多项换行时顶端对齐，间距更合理 */
.maternal-info .info-row {
    align-items: flex-start;
    gap: 8px;
}

/* 仅在基础信息区域将信息项竖向排列，实现换行显示 */
.fetal-basic .info-row {
    flex-direction: row;
    /* 标题与内容同一行显示 */
    align-items: center;
    flex-wrap: nowrap;
    /* 不换行 */
    gap: 0;
}

.fetal-basic .info-row .value {
    margin-right: 10px;
    /* 与其他模块一致的间距 */
}

.ml-20 {
    margin-left: 20px;
}

.ml-40 {
    margin-left: 40px;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(74, 158, 255, 0.3) 50%, transparent 100%);
    margin: 10px 0;
}

.maternal-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    /* 与胎儿信息左对齐 */
}

/* 生长发育 */
.development-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 11px;
    /* 与标题文字对齐 */
}

.development-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 8px 0;
    /* 移除左右padding，保持与标题对齐 */
    background: transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.development-item:hover {
    background: transparent;
}

.development-item .indicator {
    color: #8cb4d8;
}

.development-item .measure-value {
    color: #ffffff;
    font-weight: 500;
}

/* 生命体征 */
.vital-signs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 11px;
    /* 与标题文字对齐 */
}

.vital-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 10px 0;
    /* 移除左右padding，保持与标题对齐 */
    background: transparent;
    border-radius: 4px;
}

.vital-item .label {
    color: #8cb4d8;
    font-weight: 500;
}

.vital-item .value {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.vital-item .value.highlight {
    color: #4a9eff;
    font-weight: bold;
}

/* 特征列表 */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 11px;
    /* 与标题文字对齐 */
}

.feature-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.6;
}

/* 使特定项在内容换行时顶部对齐（用于健康建议） */
.feature-item.align-top {
    align-items: flex-start;
}

.label {
    color: #8cb4d8;
    min-width: 70px;
}

.value {
    color: #ffffff;
    flex: 1;
}

.value.small {
    font-size: 11px;
    line-height: 1.5;
    color: #b8d4e8;
}

/* 标签组 */
.tag-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(74, 158, 255, 0.2);
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 3px;
    font-size: 11px;
    color: #4a9eff;
}

.tag.warning {
    background: rgba(255, 159, 64, 0.2);
    border-color: rgba(255, 159, 64, 0.4);
    color: #ff9f40;
}

/* 状态标签 */
.status {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.status.normal {
    background: rgba(75, 192, 192, 0.2);
    border: 1px solid rgba(75, 192, 192, 0.4);
    color: #4bc0c0;
}

.warning {
    color: #ff9f40;
}

/* 中央舞台区域 */
.center-stage {
    grid-area: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 700px;
    /* 增加默认高度（+100px） */
    background: linear-gradient(135deg, rgba(13, 31, 60, 0.3) 0%, rgba(26, 59, 102, 0.2) 100%);
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

#canvas-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 模型加载覆盖层：覆盖在 3D 容器上方显示提示与进度 */
.loading-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    color: #ffffff;
    z-index: 10;
}

.loading-overlay.active {
    display: none !important;
}

.loading-overlay .message {
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* 模型控制区域骨骼按钮上方的横向说明（5s后自动消失） */
.model-toggle-btn-dual[data-layer="bone"] {
    position: relative;
    overflow: visible;
    /* 允许上方说明文字溢出显示 */
}

.model-toggle-btn-dual[data-layer="bone"] .model-progress {
    position: absolute;
    bottom: calc(100% + 28px);
    /* 位于提示文字之上，使其处于模型与提示之间 */
    left: 50%;
    transform: translateX(-50%);
    display: none;
    /* 默认隐藏，加载超过2秒后显示 */
    align-items: center;
    gap: 10px;
    z-index: 110;
    /* 高于提示文字 */
}

.model-toggle-btn-dual[data-layer="bone"] .model-progress.active {
    display: flex;
}

.model-toggle-btn-dual[data-layer="bone"] .model-progress .bar {
    width: 240px;
    height: 8px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(74, 158, 255, 0.45);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.35) inset;
}

.model-toggle-btn-dual[data-layer="bone"] .model-progress .bar .fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4a9eff 0%, #6dd5ed 100%);
    box-shadow: 0 0 12px rgba(109, 213, 237, 0.55);
}

.model-toggle-btn-dual[data-layer="bone"] .model-progress .text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}

.model-toggle-btn-dual[data-layer="bone"] .control-instructions {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.6;
    pointer-events: none;
    z-index: 100;
    /* 确保覆盖在按钮之上 */
    animation: fadeOutHide 0.5s ease 15s forwards;
    /* 20s 后淡出 */
}

.model-toggle-btn-dual[data-layer="bone"] .control-instructions .segment {
    display: inline-block;
    padding: 0 8px;
}

.model-toggle-btn-dual[data-layer="bone"] .control-instructions .segment+.segment {
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    /* 半透明分割线 */
    margin-left: 4px;
    padding-left: 12px;
}

@keyframes fadeOutHide {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fadeOutAfter5s {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* 移除中央区域 Canvas 的阴影效果 */
.center-stage canvas {
    box-shadow: none !important;
    filter: none !important;
}

/* 年龄段选择器 */
.age-selector {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
}

.age-selector label {
    color: #4a9eff;
    font-size: 14px;
    font-weight: 500;
}

.age-select {
    padding: 8px 15px;
    background: rgba(26, 59, 102, 0.3);
    /* 与 sheet 背景一致 */
    border: 1px solid rgba(74, 158, 255, 0.5);
    /* 近似 sheet 边框风格 */
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    /* 与 sheet 一致的模糊强度 */
    min-width: 180px;
    /* 自定义右侧箭头，并左移 8px */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='%234a9eff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 34px;
}

.age-select:hover {
    background: rgba(74, 158, 255, 0.1);
}

.age-select:focus {
    background: rgba(74, 158, 255, 0.15);
}

.age-select option {
    background: rgba(26, 59, 102, 0.3);
    /* 下拉列表项采用与 sheet 一致的半透明色 */
    color: #ffffff;
    /* 文字白色 */
    padding: 8px;
}

/* 模型图层控制器 */
.model-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.model-toggle-btn {
    background: rgba(10, 22, 40, 0.85);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 8px;
    padding: 6px 14px;
    /* 缩小高度 */
    color: #8cb4d8;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.model-toggle-btn .icon {
    font-size: 18px;
}

.model-toggle-btn:hover {
    background: rgba(74, 158, 255, 0.15);
    border-color: rgba(74, 158, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.2);
}

.model-toggle-btn.active {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.3) 0%, rgba(53, 122, 189, 0.3) 100%);
    border-color: #4a9eff;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.4);
}

.model-toggle-btn.active .icon {
    filter: drop-shadow(0 0 5px rgba(74, 158, 255, 0.8));
}

/* 双功能按钮（内脏/骨骼） */
.model-toggle-btn-dual {
    background: rgba(10, 22, 40, 0.85);
    border: 1px solid rgba(74, 158, 255, 0.3);
    /* 描边更细 */
    border-radius: 8px;
    color: #8cb4d8;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all 0.3s ease;
}

.model-toggle-btn-dual.active {
    border-color: #4a9eff;
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.4);
}

.btn-toggle-part {
    flex: 1;
    padding: 6px 12px;
    /* 缩小高度 */
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-toggle-part:hover {
    background: rgba(74, 158, 255, 0.15);
}

.model-toggle-btn-dual.active .btn-toggle-part {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.3) 0%, rgba(53, 122, 189, 0.3) 100%);
    color: #ffffff;
}

.btn-toggle-part .icon {
    font-size: 18px;
}

.model-toggle-btn-dual.active .btn-toggle-part .icon {
    filter: drop-shadow(0 0 5px rgba(74, 158, 255, 0.8));
}

.btn-sheet-part {
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-left: 1px solid rgba(74, 158, 255, 0.3);
    transition: all 0.3s ease;
    background: rgba(74, 158, 255, 0.25);
}

/* 三视图按钮组（独立按钮） */
.view-buttons {
    display: flex;
    gap: 15px;
    /* 与 .model-controls 的间距一致 */
}

/* 视图按钮继承 .model-toggle-btn 样式，仅保留容器布局 */

/* 独立按钮不依赖双功能按钮状态 */

.btn-sheet-part:hover {
    background: rgba(74, 158, 255, 0.1);
}

.btn-sheet-part .sheet-icon {
    font-size: 16px;
}

/* 皮肤控制侧边栏 */
.skin-sheet {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background: rgba(26, 59, 102, 0.3);
    /* 30%透明度 */
    border-left: 2px solid rgba(74, 158, 255, 0.5);
    backdrop-filter: blur(20px);
    /* 增强模糊效果 */
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 900;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.skin-sheet.active {
    right: 0;
    /* 皮肤面板在右侧 */
}

.skin-part-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(74, 158, 255, 0.1);
}

.skin-part-item:last-child {
    border-bottom: none;
}

.skin-part-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.skin-part-item label:hover {
    color: #4a9eff;
}

.skin-part-checkbox {
    margin-right: 10px;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* 骨骼控制侧边栏 */
.bone-sheet {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background: rgba(26, 59, 102, 0.3);
    /* 30%透明度 */
    border-left: 2px solid rgba(74, 158, 255, 0.5);
    backdrop-filter: blur(20px);
    /* 增强模糊效果 */
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 900;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.bone-sheet.active {
    right: 0;
    /* 骨骼面板在右侧 */
}

.bone-sheet.active.shifted {
    right: 360px;
    /* 当皮肤面板也打开时，骨骼面板向左移动 */
}

.sheet-header {
    background: rgba(74, 158, 255, 0.2);
    padding: 20px;
    border-bottom: 2px solid rgba(74, 158, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.sheet-header h3 {
    margin: 0;
    color: #4a9eff;
    font-size: 18px;
    font-weight: bold;
}

.sheet-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.sheet-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #4a9eff;
}

.sheet-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.sheet-body::-webkit-scrollbar {
    width: 6px;
}

.sheet-body::-webkit-scrollbar-track {
    background: rgba(74, 158, 255, 0.1);
    border-radius: 3px;
}

.sheet-body::-webkit-scrollbar-thumb {
    background: rgba(74, 158, 255, 0.5);
    border-radius: 3px;
}

.bone-part-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(74, 158, 255, 0.1);
}

.bone-part-item:last-child {
    border-bottom: none;
}

.bone-part-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.bone-part-item label:hover {
    color: #4a9eff;
}

.bone-part-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: #4a9eff;
}

.bone-parts-list {
    margin-top: 10px;
}

/* 分类标题样式 */
.part-category-header {
    margin: 20px 0 10px 0;
    padding: 8px 12px;
    background: rgba(74, 158, 255, 0.15);
    border-left: 3px solid #4a9eff;
    border-radius: 4px;
}

.part-category-header:first-child {
    margin-top: 0;
}

.part-category-header h4 {
    margin: 0;
    color: #4a9eff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 内脏控制侧边栏 */
.organ-sheet {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background: rgba(26, 59, 102, 0.3);
    /* 30%透明度 */
    border-left: 2px solid rgba(74, 158, 255, 0.5);
    backdrop-filter: blur(20px);
    /* 增强模糊效果 */
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 900;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.organ-sheet.active {
    right: 0;
    /* 内脏面板默认在最右侧 */
}

.organ-sheet.active.shifted {
    right: 360px;
    /* 当皮肤或骨骼面板也打开时，内脏面板向左移动，留10px间距 */
}

.organ-part-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(74, 158, 255, 0.1);
}

/* 随访右侧弹出sheet */
.followup-sheet {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background: rgba(26, 59, 102, 0.3);
    border-left: 2px solid rgba(74, 158, 255, 0.5);
    backdrop-filter: blur(20px);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 905;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.followup-sheet.active {
    right: 0;
}

.followup-patient-info {
    background: rgba(74, 158, 255, 0.08);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.followup-entries {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.followup-entry {
    padding: 10px 12px;
    border: 1px solid rgba(74, 158, 255, 0.25);
    border-radius: 6px;
    background: rgba(74, 158, 255, 0.06);
}

.followup-entry .entry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 12px;
}

.followup-entry .entry-row .label {
    color: #b8d4e8;
}

.followup-entry input[type="text"],
.followup-entry input[type="datetime-local"],
.followup-entry select,
.followup-entry textarea {
    flex: 1;
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.25);
    border-radius: 4px;
    color: #e3f0fb;
    padding: 6px 8px;
}

.followup-entry textarea {
    min-height: 64px;
}

.followup-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

/* Header 随访按钮样式 */
.header .followup-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #4a9eff;
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 6px;
    font-size: 14px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 8px;
}

.header .followup-btn:hover {
    background: rgba(74, 158, 255, 0.12);
}

/* 随访按钮图标样式 */
.header .followup-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* 线性SVG图标统一颜色与描边 */
.header .followup-btn .btn-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.header .followup-btn .btn-icon svg * {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 兼容 JS 创建的随访条目行类名 */
.followup-entry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 12px;
}

.followup-entry-row .label {
    color: #b8d4e8;
}

.followup-title,
.followup-content,
.followup-date {
    flex: 1;
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.25);
    border-radius: 4px;
    color: #e3f0fb;
    padding: 6px 8px;
}

.followup-content {
    min-height: 64px;
}

/* 随访患者信息行间距优化 */
.followup-patient-info .info-row {
    gap: 6px;
}

.organ-part-item:last-child {
    border-bottom: none;
}

.organ-part-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.organ-part-item label:hover {
    color: #4a9eff;
}

.organ-part-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: #4a9eff;
}

.organ-parts-list {
    margin-top: 10px;
}

/* 部位名称样式 */
.part-name-chinese {
    color: #ffffff;
    font-size: 14px;
    margin-right: 6px;
}

.part-name-english {
    color: #ffffff;
    font-size: 11px;
    /* 缩小字号 */
    opacity: 0.5;
    /* 50%透明度 */
}

/* 器官Tooltip */
.organ-tooltip {
    position: fixed;
    background: rgba(26, 59, 102, 0.95);
    border: 2px solid rgba(74, 158, 255, 0.6);
    border-radius: 8px;
    padding: 10px 15px;
    color: #ffffff;
    font-size: 14px;
    pointer-events: none;
    z-index: 10000;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(74, 158, 255, 0.3);
    animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 健康评分 */
.health-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #4a9eff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    color: #4a9eff;
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.4);
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.score-label {
    font-size: 13px;
    color: #8cb4d8;
}

/* 健康评分水波纹 */
.score-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--wave-level, 50) * 1%);
    overflow: hidden;
}

.score-wave-layer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 40px;
    background-repeat: repeat-x;
    background-size: 120px 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'><path fill='rgba(74,158,255,0.35)' d='M0 20 Q 30 0 60 20 T 120 20 V40 H0 Z'/></svg>");
    animation: waveMove 8s linear infinite;
}

.score-wave-layer.alt {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'><path fill='rgba(74,158,255,0.5)' d='M0 22 Q 30 6 60 22 T 120 22 V40 H0 Z'/></svg>");
    animation-duration: 12s;
    opacity: 0.9;
}

@keyframes waveMove {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -240px;
    }
}

/* 雷达图 */
.radar-chart {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#radarCanvas {
    width: 160px;
    height: 160px;
}

/* 下拉选项：阶段名称文字改为灰色（分隔线样式保留） */
select.age-select option:not(.option-separator) {
    color: #888;
}

/* 疾病信息 */
.disease-list,
.vaccine-info,
.constitution-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 11px;
    /* 与标题文字对齐 */
}

.disease-item,
.vaccine-item {
    display: flex;
    align-items: center;
    font-size: 12px;
}

/* 底部面板 */
.bottom-panel {
    grid-area: bottom;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.data-section {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 12px;
    padding-bottom: 52px;
    /* 额外增加40px高度 */
    backdrop-filter: blur(10px);
}

.section-title {
    font-size: 14px;
    font-weight: bold;
    color: #4a9eff;
    margin-bottom: 10px;
    height: 34px;
    /* 统一标题高度，确保分割线对齐 */
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(74, 158, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chart-placeholder {
    padding: 12px 16px;
    padding-top: 6px;
    /* 缩小顶部空白 */
    height: 200px;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: #8cb4d8;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chart-placeholder canvas {
    width: 100%;
    height: 170px;
    /* 固定画布高度，避免随容器增高而拉伸 */
    flex: 0 0 170px;
    /* 不占满父容器，保留额外留白 */
}

.chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #cbe1ff;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 增加首个就诊记录与分割线的间距 */
.history-list .history-item:first-child {
    margin-top: 12px;
}

.history-item {
    font-size: 11px;
    color: #b8d4e8;
    padding: 5px 8px;
    background: transparent;
    border-left: 2px solid #4a9eff;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.history-item:hover {
    background: rgba(74, 158, 255, 0.10);
    color: #ffffff;
    border-left-color: rgba(74, 158, 255, 0.8);
    transform: translateX(2px);
}

/* section 右上角操作按钮 */
.section-action-btn {
    background: transparent;
    color: #4a9eff;
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.section-action-btn:hover {
    background: rgba(74, 158, 255, 0.12);
}

/* 就诊历史底部弹出sheet */
.visit-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75vh;
    background: rgba(26, 59, 102, 0.3);
    border-top: 2px solid rgba(74, 158, 255, 0.5);
    backdrop-filter: blur(20px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    z-index: 950;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.visit-sheet.active {
    transform: translateY(0);
}

.visit-patient-info {
    background: rgba(74, 158, 255, 0.08);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.visit-info-divider {
    border-top: 1px solid rgba(74, 158, 255, 0.2);
    margin: 8px 0;
}

.visit-content {
    display: flex;
    gap: 12px;
    height: 100%;
}

/* 健康评分历史底部弹出sheet */
.score-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50vh;
    background: rgba(26, 59, 102, 0.3);
    border-top: 2px solid rgba(74, 158, 255, 0.5);
    backdrop-filter: blur(20px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    z-index: 980;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.score-modal.active {
    transform: translateY(0);
}

.score-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(74, 158, 255, 0.3);
}

.score-modal .modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: #e3f0fb;
}

.score-modal .modal-close {
    background: transparent;
    color: #b8d4e8;
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 4px;
    font-size: 16px;
    padding: 2px 8px;
    cursor: pointer;
}

.score-modal .modal-close:hover {
    background: rgba(74, 158, 255, 0.12);
}

.score-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 8px 12px;
    overflow-y: auto;
}

.score-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.score-content {
    display: flex;
    gap: 12px;
    align-items: stretch;
    padding: 0 8px 8px;
}

.score-content .score-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 160px;
    min-width: 140px;
    max-width: 180px;
    padding: 8px;
    border-right: 1px solid rgba(74, 158, 255, 0.2);
    overflow-y: auto;
}

.score-content .score-timeline .score-timeline-item {
    width: 100%;
    text-align: left;
}

.score-content .score-chart {
    flex: 1;
}

.score-content .score-scale {
    flex: 0 0 40%;
    max-width: 40%;
}

.score-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 8px;
}

.score-timeline-item {
    padding: 4px 8px;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    color: #b8d4e8;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.score-timeline-item:hover {
    background: rgba(74, 158, 255, 0.08);
}

.score-timeline-item.active {
    background: rgba(74, 158, 255, 0.18);
    color: #ffffff;
}

.score-chart {
    position: relative;
    flex: 1;
    min-height: 140px;
    padding: 6px 8px 0;
}

#scoreChartCanvas {
    width: 100%;
    height: 100%;
}

.score-scale {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 8px 8px;
}

.scale-title {
    font-size: 13px;
    color: #e3f0fb;
}

.scale-bands {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.scale-band {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(74, 158, 255, 0.3);
    background: rgba(74, 158, 255, 0.08);
    color: #b8d4e8;
    font-size: 12px;
    text-align: center;
}

.scale-band strong {
    display: block;
    margin-bottom: 4px;
    color: #e3f0fb;
}

.scale-band.active {
    background: rgba(74, 158, 255, 0.18);
    color: #ffffff;
    border-color: rgba(74, 158, 255, 0.7);
}

/* 评分量表详细说明 */
.scale-detail {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(74, 158, 255, 0.25);
    border-radius: 6px;
    background: rgba(74, 158, 255, 0.06);
}

.scale-detail-title {
    font-size: 13px;
    color: #e3f0fb;
    margin-bottom: 6px;
}

.scale-detail-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.scale-detail-item {
    font-size: 12px;
    color: #b8d4e8;
    line-height: 1.6;
}

.scale-detail-item strong {
    color: #e3f0fb;
}

.visit-list {
    width: 36%;
    min-width: 280px;
    border-right: 1px solid rgba(74, 158, 255, 0.2);
    padding-right: 10px;
    overflow-y: auto;
}

.visit-item {
    font-size: 12px;
    color: #cbe1ff;
    padding: 8px 10px;
    border-left: 2px solid rgba(74, 158, 255, 0.5);
    border-radius: 4px;
    background: rgba(74, 158, 255, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 6px;
}

.visit-item:hover {
    background: rgba(74, 158, 255, 0.12);
}

.visit-item.active {
    background: rgba(74, 158, 255, 0.18);
    color: #ffffff;
}

.visit-detail {
    flex: 1;
    overflow-y: auto;
    padding-left: 8px;
}

.visit-detail-title {
    font-size: 14px;
    color: #4a9eff;
    font-weight: bold;
    margin-bottom: 8px;
}

.visit-detail-row {
    display: flex;
    gap: 8px;
    margin: 6px 0;
    font-size: 12px;
}

.visit-detail-empty {
    color: #b8d4e8;
    font-size: 12px;
}

/* 右侧面板中的健康评分标签样式 */
.score-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #b8d4e8;
    user-select: none;
}

.score-label:hover {
    color: #e3f0fb;
}

.score-label-arrow {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    color: #8cb4d8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.score-label:hover .score-label-arrow {
    transform: translateX(2px);
    color: #e3f0fb;
}

/* 动画效果 */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(74, 158, 255, 0.6);
    }
}

/* 响应式调整 */
@media (max-width: 1600px) {
    .title {
        font-size: 28px;
    }

    .left-panel,
    .right-panel {
        width: 320px;
    }
}

@media (max-width: 1366px) {
    .container {
        grid-template-rows: 70px 1fr 100px;
    }

    .title {
        font-size: 24px;
    }

    .panel {
        padding: 10px;
    }

    .left-panel,
    .right-panel {
        width: 280px;
    }
}

/* 年龄段下拉菜单分割线样式：50% 透明度 */
select.age-select option.option-separator {
    color: rgba(0, 0, 0, 0.5);
    opacity: 0.5;
}

/* 移除 header 区域的装饰线条（背景网格与扫光） */
.header::before,
.header::after {
    content: none !important;
    background: none !important;
    animation: none !important;
}

/* 移除标题周围的装饰线条 */
.title::before,
.title::after {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
    animation: none !important;
}

.header .right-controls .right-divider {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, rgba(74, 158, 255, 0.35) 0%, rgba(109, 213, 237, 0.35) 100%);
    border-radius: 1px;
}

.header .left-controls {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header .patient-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #4a9eff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header .patient-list-btn:hover {
    background: rgba(74, 158, 255, 0.12);
}

.header .patient-list-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 返回按钮样式（Header 左侧） */
.header .back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #4a9eff;
    text-decoration: none;
    background: transparent;
    border: none;
    /* 删除描边 */
    transition: all 0.2s ease;
    font-size: 16px;
}

.header .back-btn:hover {
    background: rgba(74, 158, 255, 0.12);
}

/* 线性图标统一样式 */
.header .back-btn svg,
.header .patient-list-btn .btn-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 返回按钮图标加大尺寸（不影响患者列表按钮） */
.header .back-btn svg {
    width: 22px;
    height: 22px;
}

/* 左右两侧模块移除阴影（index 页面） */
.left-panel .panel,
.right-panel .panel {
    box-shadow: none !important;
}

/* 左侧患者列表sheet */
.patient-sheet {
    position: fixed;
    top: 0;
    left: -200px;
    /* 初始隐藏在左侧 */
    width: 200px;
    height: 100vh;
    background: rgba(26, 59, 102, 0.3);
    border-right: 2px solid rgba(74, 158, 255, 0.5);
    backdrop-filter: blur(20px);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 920;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.patient-sheet.active {
    left: 0;
}

.patient-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.patient-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(74, 158, 255, 0.12);
}

.patient-item:last-child {
    border-bottom: none;
}

.patient-item .name-line {
    color: #ffffff;
    font-size: 13px;
}

.patient-item .age-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8cb4d8;
    font-size: 12px;
    margin-top: 2px;
}

.patient-item:hover {
    background: rgba(74, 158, 255, 0.10);
    cursor: pointer;
}

.patient-item.active {
    background: rgba(74, 158, 255, 0.16);
}

/* 新的患者列表结构样式 */
.patient-item .first-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 13px;
}

.patient-item .gender-icon {
    font-size: 14px;
    line-height: 1;
}

.patient-item .name {
    font-size: 13px;
}

.patient-item .guardian-line {
    color: #8cb4d8;
    font-size: 12px;
    margin-top: 2px;
}

.patient-item .age-line .badge {
    display: inline-block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    background: rgba(74, 158, 255, 0.15);
    color: #a7c8e6;
    font-size: 11px;
}

.patient-item .age-line .age-text {
    color: #8cb4d8;
    font-size: 12px;
}