:root {
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-21: 21px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-28: 28px;
    --fs-32: 32px;
    --fs-8: 8px;
    --fs-10: 10px;
    --fs-48: 48px;
    --fs-40: 40px;
    --fs-50: 50px;
    --fs-110: 110px;

    --color-purple-primary: #4a2d6d;
    --color-purple-light: #50317c;
    --color-purple-dark: #382054;
    --color-purple-medium: #4E3666;
    --color-purple-deep: #3b2054;
    --color-purple-text: #554461;

    --color-green-primary: #BED73E;
    --color-green-light: #b8d27a;
    --color-green-border: #c7dc9e;
    --color-green-deep: #93b37a;
    --color-green-mint: #a3be41;

    --color-pink-primary: #F9D7E4;
    --color-pink-light: #f3e8f4;
    --color-pink-mint: #f3e5f5;
    --color-pink-bg: #faf0f6;

    --color-text-dark: #333333;
    --color-text-medium: #666666;
    --color-text-light: #999999;
    --color-text-white: #ffffff;
    --color-text-gray: #211D1B;

    --color-bg-primary: #F0F8FB;
    --color-bg-card: #ffffff;
    --color-bg-header: #f1f6fa;
    --color-bg-light: #f4f9f4;

    --color-border-gray: #cccccc;
    --color-border-light: #e1ebd9;

    --color-text-black: #000000;
    --color-purple-deep-alt: #4a2840;
    --color-text-gray-alt: #555;
    --color-text-light-alt: #888;
    --color-red-primary: #C2463B;
    --color-bg-light-blue: #f0f7fa;
    --color-pink-deep: #ebd3e8;
    --color-pink-dark: #dfbadb;
    --color-bg-purple-light: #f3ecf5;
    --color-text-dark-alt: #444;
    --color-red-light: #f00;
    --color-border-gray-light: #ccc;
    --color-purple-alt: #7a5f8f;
    --color-purple-violet: #6b21a8;
    --color-red-dark: #be123c;
    --color-bg-green-light: #e2ecc8;
    --color-bg-purple-dark: #f3e8ff;
    --color-bg-red-light: #ffe4e6;
    --color-border-green-light: #d0e4d6;
    --color-text-black-alt: #111111;
    --color-purple-pink: #9c27b0;
    --color-purple-pink-light: #e1bee7;
    --color-red-orange: #ff3b30;
    --color-purple-medium-alt: #4a3766;
    --color-purple-dark-alt: #3b2b52;
    --color-blue-dark: #2c4260;
    --color-bg-blue-light: #f0f7fb;
    --color-bg-green-mint: #e5f2c9;
    --color-purple-deep-dark: #3b2746;
    --color-text-black-light: #222;
    --color-border-blue-light: #cbd5e1;
    --color-purple-gray: #4b3658;
    --color-pink-deep-light: #f7d2e2;
    --color-bg-blue-mint: #f4f8fa;
    --color-bg-purple-mint: #f6f0f7;
    --color-bg-purple-mint-alt: #ece0f0;
    --color-bg-green-lime: #e2f0b6;
    --color-bg-purple-ultra-light: #faf5ff;
    --color-bg-purple-medium: #e8d7eb;
    --color-bg-purple-extra-light: #fcfaff;
    --color-red-primary-alt: #ff4d4f;
    --color-red-brown: #b13a22;
    --color-bg-red-light-alt: #fdf3f2;
    --color-bg-purple-lavender: #f5eff6;
    --color-purple-ultra-dark: #36284c;
    --color-bg-blue-ultra-light: #f1f7f9;
    --color-bg-pink-medium: #f3e4ee;
    --color-purple-deep-violet: #56396e;
    --color-purple-dark-violet: #432b57;
    --color-bg-pink-deep-alt: #ebd1e8;
    --color-purple-medium-violet: #4a3764;
    --color-red-bright: #e74c3c;
    --color-red-dark-alt: #c0392b;
    --color-bg-green-yellow: #f0f7de;
    --color-bg-green-lime-light: #e5f0c3;
    --color-green-dark: #6a8a23;
    --color-bg-gray-light: #f9f9f9;
    --color-purple-medium-dark: #4c3568;
    --color-bg-purple-lavender-light: #f7f3f9;
    --color-bg-pink-lavender: #ebd6e7;
    --color-blue-primary: #1677ff;
    --color-brown-dark: #2c1810;
    --color-gray-medium: #d3d3d3;
    --color-red-fire: #d62828;
    --color-bg-pink-light: #f3d8e7;
    --color-bg-pink-medium-alt: #ebc4db;
    --color-purple-deep-gray: #3b2c50;
    --color-bg-green-teal: #eef7f2;
    --color-border-green-teal: #cbdcd0;
    --color-red-max: #ff0000;
    --color-purple-dark-gray: #3b2c4f;
    --color-green-light-alt: #b8c973;
    --color-gray-light-alt: #bbb;
    --color-bg-blue-teal: #f1f8fc;
    --color-blue-purple: #4a4a8d;
    --color-green-primary-alt: #2e7d32;
    --color-pink-red: #ffbaba;
    --color-bg-blue-mint-alt: #e6f0fa;
    --color-border-green-mint: #cbdcc0;
    --color-pink-red-alt: #d24d87;
    --color-gray-medium-alt: #aaa;
    --color-bg-green-cream: #f0f1da;
    --color-green-dark-alt: #83a06d;
    --color-purple-violet-alt: #7b58a1;
    --color-green-light-mint: #b0c19b;
    --color-bg-pink-cream: #fcf8fc;
    --color-purple-pink-dark: #7b5880;
    --color-bg-green-cream-alt: #e2f0d9;
    --color-pink-border: #f5c6cb;
    --color-red-maroon: #a32a2a;
    --color-purple-deep-mint: #39285e;
    --color-bg-green-light-mint: #e8f5c8;
    --color-bg-green-lime-alt: #e2f0cb;
    --color-purple-medium-deep: #51386e;
    --color-red-danger: #d9534f;
    --color-bg-blue-light-alt: #f1f4fa;
    --color-purple-deep-mint-alt: #3b2257;
    --color-bg-purple-cream: #faf9fc;
    --color-green-bright: #52c41a;
    --color-gray-blue: #7a8b90;
    --color-bg-pink-rose: #f6dbdd;
    --color-bg-gray-blue: #e1e9ec;
    --color-gray-blue-dark: #5a6e75;
    --color-bg-pink-lavender-alt: #eddbe9;
    --color-bg-gray-medium: #f1f1f1;
    --color-border-gray-medium: #d1d1d1;
    --color-bg-gray-light-alt: #f7f9fa;
    --color-pink-purple-dark: #8c4370;
    --color-text-black-deep: #1a1a1a;
    --color-bg-gray-light-deep: #f5f5f5;
    --color-purple-medium-dark-alt: #4e3969;
    --color-purple-deep-dark-alt: #3d2c53;
    --color-bg-green-cream-deep: #f1f8ee;
    --color-border-gray-blue: #cfd8dc;
    --color-bg-purple-light-alt: #d1c4e9;
    --color-bg-blue-light-deep: #f3f8fe;
    --color-blue-purple-dark: #3a416d;
    --color-gray-blue-medium: #5e6582;
    --color-purple-gray-dark: #513957;
    --color-purple-deep-medium: #4b3464;
    --color-purple-deep-dark-deep: #3a274e;
    --color-bg-green-yellow-alt: #e2ebb4;
    --color-bg-blue-lavender: #f0f5fa;
    --color-green-success: #2ba245;
    --color-orange-primary: #ff8200;
    --color-blue-linkedin: #0077b5;
    --color-red-material: #f44336;
    --color-green-success-dark: #258a3a;
    --color-red-weibo: #E6162D;
    --color-purple-accent: #7e57c2;
    --color-purple-accent-light: #9575cd;
    --color-bg-gray-blue-light: #f3f7f9;
    --color-green-mint-light: #cbdc83;
    --color-bg-purple-lavender-deep: #e5daf1;
    --color-purple-violet-dark: #4a148c;
    --color-red-error: #ef5350;
    --color-red-error-dark: #d32f2f;
    --color-purple-deep-alt-dark: #38294e;
    --color-bg-green-success: #E8F5E9;
    --color-green-success-light: #A5D6A7;
    --color-purple-violet-medium: #5E35B1;
    --color-purple-violet-light: #7b1fa2;
    --color-red-error-alt: #e53935;
    --color-blue-qq: #12B7F5;
    --color-blue-facebook: #1877F2;
    --color-blue-twitter: #1DA1F2;
    --color-bg-green-lime-deep: #dcedc8;
    --color-bg-pink-rose-alt: #fce4ec;
    --color-pink-purple-deep: #880e4f;
    --color-purple-violet-deep: #311b92;
    --color-bg-green-lime-cream: #f1f8e9;
    --color-bg-gray-ultra-light: #fafafa;
    --color-red-danger-dark: #b71c1c;
    --color-gray-blue-deep: #546e7a;
    --color-bg-purple-lavender-light: #ede7f6;
    --color-text-black-medium: #212121;
    --color-green-material: #4caf50;
}

@media (min-width: 1920px) {
    :root {
        --fs-11: 16px;
        --fs-12: 17px;
        --fs-13: 18px;
        --fs-14: 19px;
        --fs-15: 20px;
        --fs-16: 21px;
        --fs-17: 22px;
        --fs-18: 23px;
        --fs-19: 24px;
        --fs-20: 25px;
        --fs-21: 26px;
        --fs-22: 27px;
        --fs-24: 29px;
        --fs-28: 33px;
        --fs-32: 37px;
        --fs-48: 53px;
        --fs-8: 13px;
        --fs-10: 15px;
        --fs-40: 45px;
        --fs-50: 55px;
        --fs-110: 115px;
    }
}

/* 全局基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: url(image/bg1.png);
    background-size: contain;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  
}

/* 1. 顶部导航栏 */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: transparent;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background-color: #50317c;
    color: #e9cb85;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.logo-text {
    background-color: #F9D7E4;
    padding: 6px 30px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #50317c;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-profile {
    background: #F9D7E4;
    padding: 4px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #50317c;
    font-weight: 500;
}

/* 2. 主体菜单标签页 */
.main-tabs {
    display: flex;
    gap: 8px;
    padding-left: 20px;
    margin-bottom: -1px; /* 让激活的卡片与下方面板无缝融合 */
    z-index: 2;
    flex-shrink: 0;
}

.tab-item {
    padding: 8px 24px;
    border: none;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    cursor: pointer;
    font-weight: bold;
    border:2px solid #ffffff;
}

.tab-item.active {
    background-color: rgba(190, 215, 62, 0.4); /* 激活的浅绿 */
    color: #000000;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    margin-bottom: -2px;
}

.tab-item.pink-tab {
    background-color: #F9D7E4; /* 未激活的浅粉红 */
    color: #a4769a;
}

/* 3. 主体工作区布局 */
.workspace {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 左侧二级纵向导航栏 */
/* 左侧导航栏容器 */
.sidebar-nav {
    width: 126px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    /* align-items: flex-end; 删掉，会让子元素宽度失效 */
    position: relative;
  background-image: url(image/leftmu1_03.png);
    background-size: 100% auto; /* 宽度铺满侧边栏 */
    
}
/* 导航选项通用基础样式 */
.sidebar-item {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #49633e;
    cursor: pointer;
    position: relative;
    z-index: 100;
    /* 关键：消除背景缝隙 */
    background-repeat: no-repeat;
    background-position: center;
}

.sidebar-item.active-sidebar {
    font-weight: bold;
     background-image: url(image/373-3_03.png);
    background-repeat: no-repeat;
    /* 宽度100%填满，高度匹配容器，完全盖住父背景 */
    background-size: 129px 100%;
    background-position: center;
    /* 加高z-index兜底 */
    z-index: 999;
}

/* ========================================================
   核心魔法：利用 SVG Data-URI 作为遮罩，切出完美的大括号凹陷边缘
   ======================================================== */
.sidebar-item.active-tab {
    font-weight: bold;
    width: 120px; /* 宽度向左展宽，给大括号留出空间 */
    background-color: #cfe7c5; /* 激活项的浅绿底色 */
    
    /* 核心：包裹住它的深绿色大括号线条 */
    border: 1.5px solid #49633e;
    border-right: none; /* 右边不封口，与大面板接通 */
    
    /* 使用 CSS Mask 顺滑地把左侧切成内凹的大括号形状 */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="50" viewBox="0 0 120 50" preserveAspectRatio="none"><path d="M120,0 L30,0 C20,0 15,8 15,13 C15,18 5,22 0,25 C5,28 15,32 15,37 C15,42 20,50 30,50 L120,50 Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="50" viewBox="0 0 120 50" preserveAspectRatio="none"><path d="M120,0 L30,0 C20,0 15,8 15,13 C15,18 5,22 0,25 C5,28 15,32 15,37 C15,42 20,50 30,50 L120,50 Z" fill="black"/></svg>');
    
    /* 确保遮罩完美铺满当前元素 */
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 往右边多延伸 1.5px，盖住右侧面板的左边框线，实现真正的一体化 */
    margin-right: -1.5px; 
    z-index: 10; 
}

/* 右侧大面板（用于完美无缝对接） */
.content-card {
    flex: 1;
    background: linear-gradient(180deg, rgba(190, 215, 62, 0.4) 0%, rgba(190, 215, 62, 0) 100%);
    backdrop-filter: blur(2px);
    border-radius: 15px 15px 0px 0px;
    border: 3px solid rgba(255, 255, 255,1);
    padding: 20px;
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 5;
    min-height: 0;
    overflow: hidden;
}

/* 4. 工作区内部板块 */
.left-panel {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 通用白底内容块 */
.info-block {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #e1ebd9;
}

.text-muted {
    color: #999;
}

.text-danger {
    color: #e60000;
    font-size: 13px;
    line-height: 1.5;
}

/* 患者信息 */
.patient-info {
    font-size: 13px;
    line-height: 1.8;
}

/* 提示步骤框 */
.step-tip {
    background-color: #cccccc;
    color: #333;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    border: none;
}

/* 医生插画模拟样式 */
.avatar-wrapper {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #fcdde9 0%, #d5e9ff 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.doctor-face {
    font-size: 64px;
}

.plus-icon {
    position: absolute;
    color: #ff6b6b;
    font-size: 24px;
    font-weight: bold;
}
.plus-icon.top-right { top: 15px; right: 15px; }
.plus-icon.bottom-left { bottom: 40px; left: 15px; }

/* 5. 右侧特定表单区块 */
.row-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.fill-box {
    height: 120px;
}

.box-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

.box-content {
    font-size: 13px;
}

/* 处方展示区 */
.recipe-box {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 14px;
}

.status-tag {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

.recipe-footer {
    display: flex;
    justify-content: flex-end;
}

/* 底部灰色/隐藏功能测试区 */
.admin-box {
    background-color: #f6fbf3;
    border: 1px dashed #b2d5a3;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-actions {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-top: 5px;
}

/* 6. 按钮组件样式 */
.btn {
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-purple {
    background-color: #50317c;
    color: white;
    padding: 10px 45px;
}

.btn-purple:hover {
    background-color: #3e2461;
}

.btn-large {
    padding: 12px 30px;
    border-radius: 20px;
}

/* 7. 页脚 */
.footer-bar {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 12px;
    color: #8c9e85;
    flex-shrink: 0;
}

.footer-links {
    display: flex;
    gap: 15px;
}

.footer-links a {
    color: #8c9e85;
    text-decoration: none;
}

/* 语言选择弹出窗遮罩层 */
    .lang-mask {
      position: fixed;
      z-index: 9999;
      display: none;
    }
    /* 弹窗容器 */
    .lang-modal {
      width: 240px;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    /* 弹窗头部 */
    .lang-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
    }
    .lang-title {
      font-size: 14px;
      font-weight: 600;
      color: #222;
      margin: 0;
    }
    .close-btn2 {
      border: none;
      background: transparent;
      font-size: 18px;
      cursor: pointer;
      color: #666;
      padding: 0 4px;
    }
    .close-btn2:hover {
      color: #000;
    }
    /* 语言列表 */
    .lang-list {
      padding: 8px 0;
    }
    .lang-item {
      padding: 10px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.2s;
    }
    .lang-item:hover {
      background: #f5f7fa;
    }
    /* 选中语言样式 */
    .lang-item.active {
      background: #e8f3ff;
      color: #1677ff;
    }
    .lang-name {
      font-size: 14px;
    }
    /* 打开弹窗按钮 */
    .open-modal-btn {
      margin: 30px;
      padding: 10px 20px;
      font-size: 15px;
      cursor: pointer;
    }

      /* --- 注册弹出层样式 (重点) --- */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.4);
            display: none; /* 默认隐藏 */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .overlay-container {
            background-color: var(--color-text-white);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }
          /* 弹窗主容器 */
        .overlay-container {
            position: relative;
            width: 50%;
          height: 94%;
           background: linear-gradient(180deg, rgba(190, 215, 62, 0.4) 0%, rgba(190, 215, 62, 0) 100%), var(--color-bg-primary);
            border-radius: 15px;
            padding: 40px 60px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        /* 关闭按钮 X */
        .close-btn {
            position: absolute;
            left:19px;
            top: 0px;
            font-size: var(--fs-32);
            font-weight: 700;
            color: var(--color-purple-medium);
            cursor: pointer;
            text-decoration: none;
            user-select: none;
        }

        /* 顶部标题栏 */
        .header-title-wrap {
            width: 100%;
            max-width: 870px;
            margin: -40px auto 30px auto; /* 向上偏移以贴顶，还原设计稿 */
            background: var(--color-bg-primary);
            border-width: 0 3px 3px 3px;
            border-style: solid;
            border-color: var(--color-pink-primary);
            border-radius: 0 0 15px 15px;
            padding: 6px 0;
            text-align: center;
        }
  .header-title-wrap1 {
            width: 67%;
       
           /*  margin: -40px auto 30px auto; 向上偏移以贴顶，还原设计稿 */
            background: var(--color-bg-primary);
            border-width: 0 3px 3px 3px;
            border-style: solid;
            border-color: var(--color-pink-primary);
            border-radius: 0 0 15px 15px;
            padding: 15px 0;
            text-align: center;
            height: 61px;
        }
        .header-title {
            font-size: var(--fs-32);
            font-weight: 700;
            color: var(--color-purple-medium);
            
        }

        /* 协议文本外壳容器 */
        .content-box {
            width: 100%;
            max-width: 870px;
            margin: 0 auto;
            background: var(--color-text-white);
            border: 2px solid var(--color-green-primary);
            border-radius: 15px;
            padding: 24px;
            flex-grow: 1;
            display: flex;
            height: 64%;
        }

        /* 可滚动文本区域 */
        .scroll-text {
            flex-grow: 1;
          
            overflow-y: auto;
            padding-right: 20px;
            font-weight: 400;
            font-size: var(--fs-18);
            line-height: 1.6;
            color: var(--color-text-black);
            text-align: justify;
        }

        /* 优化美化滚动条，对应设计稿的粉色滑块 */
        .scroll-text::-webkit-scrollbar {
            width: 8px;
        }

        .scroll-text::-webkit-scrollbar-track {
            background: transparent;
        }

        .scroll-text::-webkit-scrollbar-thumb {
            background: var(--color-pink-primary);
            border-radius: 4px;
        }

        /* 文本内部排版样式 */
        .scroll-text p {
            margin-bottom: 20px;
        }

        .scroll-text h3 {
            font-size: var(--fs-18);
            font-weight: 700;
            color: var(--color-text-black);
            margin-top: 25px;
            margin-bottom: 8px;
        }