@charset "UTF-8";
/* ==============================================
      全局基础工程规范 CSS Token（对齐团队UI基础规范）
      适用：官网、B端PC系统、数据可视化大屏
    ============================================== */
    :root {
      /* --------------------------
       1. 文字层级（只定义行高、字重；字号项目自行定义）
      --------------------------- */
      --font-weight-normal: normal;
      --font-weight-bold: bold;
      --h1-line-height: 1.25;
      --h2-line-height: 1.333333;
      --h3-line-height: 1;
      --body-line-height: 1.875;
      --caption-line-height: 1.57142;
      --remark-line-height: 1.5;
        
      /* --------------------------
       2. 中性色 N0 ~ N9（文档示例色值）
      --------------------------- */
      --n0: #ffffff;
      --n1: #F0F3F7;
      --n2: #E1E5EB;
      --n3: #CED2D9;
      --n4: #8D9196;
      --n5: #5F6266;
      --n6: #47494D;
      --n7: #343538;
      --n8: #17181A;
      --n9: #000000;

      /* --------------------------
       3. 功能色 成功/警告/错误/信息
      --------------------------- */
      /* Success 成功 */
      --success-500: #21A464;
      --success-100: color-mix(in srgb, var(--success-500) 10%, white 90%);
      --success-600: color-mix(in srgb, var(--success-500) 90%, black 10%);

      /* Warning 警告 */
      --warning-500: #F59E0B;
      --warning-100: color-mix(in srgb, var(--warning-500) 10%, white 90%);
      --warning-600: color-mix(in srgb, var(--warning-500) 90%, black 10%);

      /* Error 错误 */
      --error-500: #F53F3F;
      --error-100: color-mix(in srgb, var(--error-500) 10%, white 90%);
      --error-600: color-mix(in srgb, var(--error-500) 90%, black 10%);

      /* Info 信息 */
      --info-500: #0086FF;
      --info-100: color-mix(in srgb, var(--info-500) 10%, white 90%);
      --info-600: color-mix(in srgb, var(--info-500) 90%, black 10%);

      /* --------------------------
       4. 品牌色（示例品牌，按需替换）
      --------------------------- */
      --color-primary: #D43030;
      --color-primary-rgb: 0, 64, 152;
      --color-black: #000000;
      --color-black-rgb: 0, 0, 0;
      --color-secondary: #C9A063;
      --color-secondary-rgb: 201, 160, 99;
      --color-white-rgb:255,255,255;
      --error-rgb: 245, 63, 63;

      /* 主色（品牌主色） */
      --color-primary-800: color-mix(in srgb, var(--color-primary) 60%, black 40%);
      --color-primary-700: color-mix(in srgb, var(--color-primary) 80%, black 20%);;
      --color-primary-600: rgba(var(--color-primary-rgb), 0.8);
      --color-primary-500: rgba(var(--color-primary-rgb), 0.6);
      --color-primary-400: rgba(var(--color-primary-rgb), 0.4);
      --color-primary-300: rgba(var(--color-primary-rgb), 0.2);
      --color-primary-200: rgba(var(--color-primary-rgb), 0.1);
      --color-primary-100: rgba(var(--color-primary-rgb), 0.05);

      /* 辅助色：特定功能，如标签、提醒、边框 */
      
      --color-secondary-800: color-mix(in srgb, var(--color-secondary) 60%, black 40%);
      --color-secondary-700: color-mix(in srgb, var(--color-secondary) 80%, black 20%);
      --color-secondary-600: rgba(var(--color-secondary-rgb), 0.8);
      --color-secondary-500: rgba(var(--color-secondary-rgb), 0.6);
      --color-secondary-400: rgba(var(--color-secondary-rgb), 0.4);
      --color-secondary-300: rgba(var(--color-secondary-rgb), 0.2);
      --color-secondary-200: rgba(var(--color-secondary-rgb), 0.1);
      --color-secondary-100: rgba(var(--color-secondary-rgb), 0.05);

      /* --------------------------
       5. 间距系统 spacing（4px基数）
      --------------------------- */
      --spacing-0: 0px;
      --spacing-xs: 4px;
      --spacing-sm: 12px;
      --spacing-md: 20px;
      --spacing-lg: 28px;
      --spacing-xl: 32px;
      --spacing-2xl: 48px;
      --spacing-3xl: 60px;
      --spacing-4xl: 72px;

      /* --------------------------
       6. 圆角系统 radius（项目A：后台克制版示例）
      --------------------------- */
      --radius-0: 0px;
      --radius-min: 4px;
      --radius-xs: 8px;
      --radius-sm: 12px;
      --radius-ms: 16px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      --radius-full: 9999px;

      /* 阴影辅助rgb拆解，方便rgba复用 */
      --n8-rgb: 23, 24, 26;
      /* --------------------------
       7. 阴影系统 shadow（左上光源，offset-x=0）
      --------------------------- */
      --shadow-1: 0 1px 4px 0 rgba(var(--n8-rgb), 0.08);
      --shadow-2: 0 2px 8px 0 rgba(var(--n8-rgb), 0.12);
      --shadow-3: 0 4px 16px 0 rgba(var(--n8-rgb),0.16);
      --shadow-4: 0 8px 24px 0 rgba(var(--n8-rgb),0.2);


      /* ========== Z-index 层级规范 ========== */
      --z-index-dropdown: 60;      /* Dropdown下拉菜单 */
      --z-index-popover: 70;       /* Popover气泡卡片 */
      --z-index-modal: 100;        /* Modal弹窗 */
      --z-index-drawer: 110;       /* Drawer抽屉（高于Modal） */
      --z-index-toast: 999;        /* Toast消息提示（顶层） */

      /* 动画变量 */
      --transition-duration-fast: 0.12s;
      --transition-duration-base: 0.2s;
      --transition-duration-medium: 0.3s;
      --transition-duration-slow: 0.4s;
      --transition-ease-base: ease;
      --transition-ease-out: ease-out;
      --transition-fast: var(--transition-duration-fast) var(--transition-ease-base);
      --transition-base: var(--transition-duration-base) var(--transition-ease-base);
      --transition-medium: var(--transition-duration-medium) var(--transition-ease-out);
      --transition-slow: var(--transition-duration-slow) var(--transition-ease-in-out);
    }
    
    /* ====================== 深色模式（明度反转，语义不变） ====================== */
    [data-theme="dark"] {
      --n0: #1d2129;
      --n1: #272e3b;
      --n2: #4e5969;
      --n3: #86909c;
      --n4: #c9cdd4;
      --n5: #e5e6eb;
      --n6: #f5f7fa;
      --n7: #ffffff;
      --n8: #FFFFFF;
      --n9: #000000;
      --n8-rgb: 255, 255, 255;
      --color-primary: #3b8bff;
      --success-500: #27c346;
      --warning-500: #ff9a2e;
      --error-500: #ff6b6b;
      --info-500: #3b8bff;

      --shadow-3: 0 2px 12px rgba(0,0,0,0.35);
      --shadow-4: 0 4px 16px rgba(0,0,0,0.45);
    }
    body{background:var(--n1); color:var(--n6); transition:background var(--transition-base),color var(--transition-base); }

    /* ====================== 文字层级基础类（对应H1~Remark） ====================== */
    .h1{font-weight:var(--font-weight-bold); line-height:var(--h1-line-height); color:var(--n7); font-size:32px; }
    .h2{font-weight:var(--font-weight-bold); line-height:var(--h2-line-height); color:var(--n7); font-size:24px; }
    .h3{font-weight:var(--font-weight-normal); line-height:var(--h3-line-height); color:var(--n6); font-size:18px; }
    .h3_bold{font-weight:var(--font-weight-bold); }
    .body{font-weight:var(--font-weight-normal); line-height:var(--body-line-height); color:var(--n6); font-size:16px; }
    .body_bold{font-weight:var(--font-weight-bold); }
    .caption{font-weight:var(--font-weight-normal); line-height:var(--caption-line-height); color:var(--n5); font-size:14px; }
    .remark{font-weight:var(--font-weight-normal); line-height:var(--remark-line-height); color:var(--n4); font-size:12px; }


    /* ====================== 间距工具类 ====================== */
    .m-0 { margin: var(--spacing-0); }
    .m-xs { margin: var(--spacing-xs); }
    .m-sm { margin: var(--spacing-sm); }
    .m-md { margin: var(--spacing-md); }
    .m-lg { margin: var(--spacing-lg); }
    .m-xl { margin: var(--spacing-xl); }
    .m-2xl { margin: var(--spacing-2xl); }
    .m-3xl { margin: var(--spacing-3xl); }
    .m-4xl { margin: var(--spacing-4xl); }

    .p-0 { padding: var(--spacing-0); }
    .p-xs { padding: var(--spacing-xs); }
    .p-sm { padding: var(--spacing-sm); }
    .p-md { padding: var(--spacing-md); }
    .p-lg { padding: var(--spacing-lg); }
    .p-xl { padding: var(--spacing-xl); }
    .p-2xl { padding: var(--spacing-2xl); }
    .p-3xl { padding: var(--spacing-3xl); }
    .p-4xl { padding: var(--spacing-4xl); }

    /* ====================== 圆角工具类 ====================== */
    .radius-0 { border-radius: var(--radius-0); }
    .radius-xs { border-radius: var(--radius-xs); }
    .radius-sm { border-radius: var(--radius-sm); }
    .radius-md { border-radius: var(--radius-md); }
    .radius-lg { border-radius: var(--radius-lg); }
    .radius-xl { border-radius: var(--radius-xl); }
    .radius-full { border-radius: var(--radius-full); }

    /* ====================== 阴影工具类 ====================== */
    .shadow-1 { box-shadow: var(--shadow-1); }
    .shadow-2 { box-shadow: var(--shadow-2); }
    .shadow-3 { box-shadow: var(--shadow-3); }
    .shadow-4 { box-shadow: var(--shadow-4); }

    /* ====================== 基础控件：按钮（4种尺寸 L/M/S/XS） ====================== */
    .btn{border:none; cursor:pointer; border-radius:var(--radius-min); font-weight:var(--font-weight-normal); font-family:inherit; display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); transition:opacity 0.2s, background-color 0.2s, color 0.2s; }

    .btn-l { height: 48px; padding: 0 var(--spacing-xl); }
    .btn-m { height: 40px; padding: 0 var(--spacing-lg); }
    .btn-s { height: 32px; padding: 0 var(--spacing-md); }
    .btn-xs { height: 24px; padding: 0 var(--spacing-sm); }

    /* 品牌主按钮 */
    .btn-primary{background-color:var(--color-primary); color:var(--n0); }
    .btn-primary:hover{ background: linear-gradient(rgba(var(--color-white-rgb),.1),rgba(var(--color-white-rgb),.1)),var(--color-primary);}
    .btn-primary:disabled{opacity:0.5; cursor:not-allowed; }


    /* 功能色按钮 */
    .btn-success { background: var(--success-500); color: var(--n0); }
    .btn-success:hover { background:var(--success-600); }
    .btn-warning { background: var(--warning-500); color: var(--n0); }
    .btn-warning:hover { background:linear-gradient(rgba(var(--color-white-rgb),.1),rgba(var(--color-white-rgb),.1)),var(--warning-600); }
    .btn-error { background: var(--error-500); color: var(--n0); }
    .btn-error:hover { background:linear-gradient(rgba(var(--color-white-rgb),.1),rgba(var(--color-white-rgb),.1)),var(--error-600); }
    .btn-info { background: var(--info-500); color: var(--n0); }
    .btn-info:hover { background:linear-gradient(rgba(var(--color-white-rgb),.1),rgba(var(--color-white-rgb),.1)), var(--info-600); }

    /* ====================== 提示块组件 ====================== */
    .tip-success { background: var(--success-100); color: var(--success-500); }
    .tip-warning { background: var(--warning-100); color: var(--warning-500); }
    .tip-error { background: var(--error-100); color: var(--error-500); }
    .tip-info { background: var(--info-100); color: var(--info-500); }

     /* ====================== 【新增组件】Input 输入框 ====================== */
    .input{box-sizing:border-box; width:100%; height:40px; padding:0 var(--spacing-sm); border:1px solid var(--n2); border-radius:var(--radius-min); background:var(--n0); color:var(--n7); font-size:16px; transition:border-color 0.2s,box-shadow 0.2s; }

    .input:focus{outline:none; border-color:var(--color-primary); box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),0.2); }
    .input::placeholder{color:var(--n4); }
    .input:disabled{background:var(--n1); cursor:not-allowed; color:var(--n4); }
    .input--error{border-color:var(--error-500); }
    .input--error:focus{box-shadow:0 0 0 2px rgba(var(--error-rgb),0.2); }

    .input-lg { height: 48px; }
    .input-sm { height: 32px; }
    .input-xs { height: 24px; }


    /* ====================== 【新增组件】Checkbox 复选框 ====================== */
    .checkbox-wrap{display:inline-flex; align-items:center; gap:var(--spacing-xs); cursor:pointer; }
    .checkbox{width:18px; height:18px; border-radius:var(--radius-min); border:1px solid var(--n3); appearance:none; position:relative; transition:background 0.2s,border-color 0.2s; }
    .checkbox:checked{background:var(--color-primary); border-color:var(--color-primary); }
    .checkbox:checked::after{content:""; position:absolute; left:5px; top:0px; width:5px; height:10px; border:solid var(--n0); border-width:0 2px 2px 0; transform:rotate(45deg); }
    .checkbox:disabled{opacity:0.5; cursor:not-allowed; }

    /* ====================== 【新增组件】Radio 单选框 ====================== */
    .radio-wrap{display:inline-flex; align-items:center; gap:var(--spacing-xs); cursor:pointer; }
    .radio{width:18px; height:18px; border-radius:999px; border:1px solid var(--n3); appearance:none; position:relative; transition:border-color 0.2s; }
    .radio:checked{border-color:var(--color-primary); }
    .radio:checked::after{content:""; position:absolute; left:4px; top:4px; width:8px; height:8px; border-radius:999px; background:var(--color-primary); }
    .radio:disabled{opacity:0.5; cursor:not-allowed; }

    /* ====================== 【新增组件】Tag 标签 ====================== */
    .tag{display:inline-flex; align-items:center; padding:0 var(--spacing-sm); height:24px; border-radius:var(--radius-xs); font-size:12px; }
    .tag-primary { background: var(--color-assist-3); color: var(--color-primary); }
    .tag-success { background: var(--success-100); color: var(--success-500); }
    .tag-warning { background: var(--warning-100); color: var(--warning-500); }
    .tag-error { background: var(--error-100); color: var(--error-500); }
    .tag-info { background: var(--info-100); color: var(--info-500); }

    /* ====================== 【新增组件】Card 卡片 ====================== */
    .card-base{background:var(--n0); border-radius:var(--radius-md); box-shadow:var(--shadow-2); overflow:hidden; }
    .card-base__header{padding:var(--spacing-md); border-bottom:1px solid var(--n2); }
    .card-base__body{padding:var(--spacing-md); }
    .card-base__footer{padding:var(--spacing-md); border-top:1px solid var(--n2); }


    /* ====================== 【新增组件】Modal 弹窗 ====================== */
    .modal-mask{position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:100; }
    .modal-wrap{width:520px; background:var(--n0); border-radius:var(--radius-md); box-shadow:var(--shadow-4); }
    .modal__header{padding:var(--spacing-md); border-bottom:1px solid var(--n2); display:flex; justify-content:space-between; align-items:center; }
    .modal__body{padding:var(--spacing-md); }
    .modal__footer{padding:var(--spacing-md); border-top:1px solid var(--n2); display:flex; gap:var(--spacing-sm); justify-content:flex-end; }
    .modal-close{cursor:pointer; color:var(--n5); }


    /* ====================== 【新增组件】Toast 轻提示 ====================== */
    .toast-wrap{position:fixed; left:50%; top:40px; transform:translateX(-50%); z-index:200; }
    .toast{padding:var(--spacing-sm) var(--spacing-md); background:var(--n7); color:var(--n0); border-radius:var(--radius-min); box-shadow:var(--shadow-3); margin-bottom:var(--spacing-xs); }
    .toast-success{background:var(--success-500); }
    .toast-warning{background:var(--warning-500); }
    .toast-error{background:var(--error-500); }
    .toast-info{background:var(--info-500); }


    /* ====================== 【新增组件】Tooltip 文字提示 ====================== */
    .tooltip-wrap{position:relative; display:inline-block; }
    .tooltip-tip{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px; padding:var(--spacing-xs) var(--spacing-sm); background:var(--n7); color:var(--n0); border-radius:var(--radius-xs); font-size:12px; white-space:nowrap; box-shadow:var(--shadow-2); opacity:0; visibility:hidden; transition:opacity 0.2s; z-index:50; }
    .tooltip-wrap:hover .tooltip-tip{opacity:1; visibility:visible; }

    /* ====================== 【新增组件】Select 下拉选择器 ====================== */
    .select-wrap{position:relative; width:100%; max-width:320px; }
    .select{box-sizing:border-box; width:100%; height:40px; padding:0 var(--spacing-sm); padding-right:32px; border:1px solid var(--n3); border-radius:var(--radius-min); background:var(--n0); color:var(--n7); font-size:16px; transition:border-color 0.2s,box-shadow 0.2s; appearance:none; cursor:pointer; }
    .select:focus{outline:none; border-color:var(--color-primary); box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),0.2); }
    .select::placeholder{color:var(--n4); }
    .select:disabled{background:var(--n1); cursor:not-allowed; color:var(--n4); }
    .select--error{border-color:var(--error-500); }
    .select--error:focus{box-shadow:0 0 0 2px rgba(var(--error-rgb),0.2); }
    .select__arrow{position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--n4); }
    .select-lg{height:48px; }
    .select-sm{height:32px; }


    /* ====================== 【新增组件】Table 表格 ====================== */
    .table-wrap{overflow-x:auto; }
    .table{width:100%; border-collapse:collapse; background:var(--n0); }
    .table th,.table td{padding:var(--spacing-sm) var(--spacing-md); text-align:left; border-bottom:1px solid var(--n2); }
    .table th{color:var(--n6); font-weight:var(--font-weight-bold); background:var(--n1); }
    .table tbody tr:hover{background:var(--n1); }
    .table .row--disabled{color:var(--n4); }
    .table .row--warning{background:var(--warning-100); }
    .table .row--error{background:var(--error-100); }


    /* ====================== 【新增组件】Pagination 分页 ====================== */
    .pagination{display:flex; align-items:center; gap:var(--spacing-xs); }
    .pagination__btn{min-width:32px; height:32px; padding:0 var(--spacing-xs); border:1px solid var(--n3); border-radius:var(--radius-xs); background:var(--n0); color:var(--n6); cursor:pointer; font-size:14px; transition:border-color 0.2s,color 0.2s; }
    .pagination__btn:hover:not(:disabled){border-color:var(--color-primary); color:var(--color-primary); }
    .pagination__btn:disabled{color:var(--n3); cursor:not-allowed; }
    .pagination__btn.is-active{background:var(--color-primary); color:var(--n0); border-color:var(--color-primary); }
    .pagination__gap{padding:0 var(--spacing-xs); color:var(--n4); }
    .pagination__total{margin-left:var(--spacing-md); color:var(--n5); font-size:14px; }

    /* ====================== 【新增组件】Dropdown 下拉菜单 ====================== */
    .dropdown-wrap{position:relative; display:inline-block; }
    .dropdown-trigger{display:inline-flex; align-items:center; gap:var(--spacing-xs); }
    .dropdown-menu{position:absolute; top:100%; left:0; margin-top:var(--spacing-xs); min-width:140px; background:var(--n0); border-radius:var(--radius-min); box-shadow:var(--shadow-3); z-index:60; overflow:hidden; display:none; }
    .dropdown-item{padding:var(--spacing-sm) var(--spacing-md); color:var(--n6); cursor:pointer; transition:background 0.2s; }
    .dropdown-item:hover{background:var(--n1); }
    .dropdown-item--danger{color:var(--error-500); }
    .dropdown-divider{height:1px; background:var(--n2); margin:var(--spacing-xs) 0; }
    .dropdown-wrap.open .dropdown-menu{display:block; }

    /* ====================== 【新增组件】Steps 步骤条 ====================== */
    .steps{display:flex; align-items:flex-start; }
    .step-item{flex:1; display:flex; flex-direction:column; position:relative; }
    .step-item:not(:last-child)::after{content:""; position:absolute; left:24px; top:12px; width:calc(100% - 24px); height:2px; background:var(--n2); }
    .step-item__icon{width:24px; height:24px; border-radius:999px; background:var(--n2); color:var(--n0); display:inline-flex; align-items:center; justify-content:center; font-size:12px; z-index:2; }
    .step-item__title{margin-top:var(--spacing-xs); color:var(--n5); }
    /* 已完成 */
    .step-item.is-finish .step-item__icon{background:var(--success-500); }
    .step-item.is-finish::after{background:var(--success-500); }
    .step-item.is-finish .step-item__title{color:var(--n7); }
    /* 当前进行中 */
    .step-item.is-process .step-item__icon{background:var(--color-primary); }
    .step-item.is-process .step-item__title{color:var(--n7); font-weight:var(--font-weight-bold); }

    /* ====================== 【新增组件】Progress 进度条 ====================== */
    .progress{width:100%; height:8px; background:var(--n2); border-radius:var(--radius-full); overflow:hidden; }
    .progress__inner{height:100%; border-radius:var(--radius-full); background:var(--color-primary); transition:width 0.3s ease; }
    .progress-success .progress__inner{background:var(--success-500); }
    .progress-warning .progress__inner{background:var(--warning-500); }
    .progress-error .progress__inner{background:var(--error-500); }
    .progress-lg{height:12px; }
    .progress-sm{height:4px; }

    /* ====================== 【新增组件】Switch 开关 ====================== */
    .switch-wrap{display:inline-flex; align-items:center; gap:var(--spacing-xs); cursor:pointer; }
    .switch{position:relative; width:44px; height:22px; background:var(--n3); border-radius:999px; transition:background 0.2s; }
    .switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:var(--n0); border-radius:999px; transition:transform 0.2s; }
    .switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
    .switch input:checked + .switch__bg{background:var(--color-primary); }
    .switch input:checked ~ .switch::after{transform:translateX(22px); }
    .switch input:checked{background:var(--color-primary); }
    .switch.is-checked{background:var(--color-primary); }
    .switch.is-checked::after{transform:translateX(22px); }
    .switch:has(input:disabled){opacity:0.5; cursor:not-allowed; }


    /* ====================== 【新增组件】Rate 评分 ====================== */
    .rate{display:inline-flex; gap:2px; }
    .rate-item{font-size:20px; color:var(--n3); cursor:pointer; transition:color 0.2s; }
    .rate-item.active{color:var(--warning-500); }
    .rate-item:hover{color:var(--warning-500); }


    /* ====================== 【新增组件】Alert 警告块 ====================== */
    .alert{padding:var(--spacing-sm) var(--spacing-md); border-radius:var(--radius-min); display:flex; align-items:flex-start; gap:var(--spacing-sm); }
    .alert-info{background:var(--info-100); color:var(--info-500); }
    .alert-success{background:var(--success-100); color:var(--success-500); }
    .alert-warning{background:var(--warning-100); color:var(--warning-500); }
    .alert-error{background:var(--error-100); color:var(--error-500); }
    .alert__close{margin-left:auto; cursor:pointer; opacity:0.7; }
    .alert__close:hover{opacity:1; }

    /* ====================== 【新增组件】Tabs 标签页 ====================== */
    .tabs{display:flex; border-bottom:1px solid var(--n2); }
    .tab-item{padding:var(--spacing-sm) var(--spacing-md); cursor:pointer; color:var(--n5); position:relative; transition:color 0.2s; }
    .tab-item.is-active{color:var(--color-primary); font-weight:var(--font-weight-bold); }
    .tab-item.is-active::after{content:""; position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:var(--color-primary); }
    .tab-item:hover:not(.is-active){color:var(--n7); }
    .tab-content{padding:var(--spacing-md) 0; color:var(--n6); }
    .tab-pane{display:none; }
    .tab-pane.is-active{display:block; }


    /* ====================== 【新增组件】Tree 树形控件 ====================== */
    .tree{font-size:14px; color:var(--n6); }
    .tree-node{user-select:none; }
    .tree-node__label{display:inline-flex; align-items:center; padding:4px 0; cursor:pointer; border-radius:var(--radius-xs); padding-left:4px; }
    .tree-node__label:hover{background:var(--n1); }
    .tree-node__arrow{width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:var(--n5); transition:transform 0.2s; }
    .tree-node--expand > .tree-node__label > .tree-node__arrow{transform:rotate(90deg); }
    .tree-children{padding-left:20px; display:none; }
    .tree-node--expand > .tree-children{display:block; }
    .tree-node__checkbox{margin-right:6px; }


    /* ====================== 【新增组件】Upload 上传 ====================== */
    .upload{display:flex; }
    .upload__trigger{border:1px dashed var(--n3); border-radius:var(--radius-min); padding:var(--spacing-md); text-align:center; cursor:pointer; transition:border-color 0.2s; }
    .upload__trigger:hover{border-color:var(--color-primary); }
    .upload__input{display:none; }
    .upload-list{margin-top:var(--spacing-sm); display:flex; flex-direction:column; gap:8px; }
    .upload-item{display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--n1); border-radius:var(--radius-xs); }
    .upload-item__name{flex:1; color:var(--n6); }
    .upload-item__close{cursor:pointer; color:var(--n5); }


    /* ====================== 【新增组件】Drawer 抽屉 ====================== */
    .drawer-mask{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:110; display:none; }
    .drawer-wrap{position:fixed; top:0; right:0; width:420px; height:100%; background:var(--n0); box-shadow:var(--shadow-4); transform:translateX(100%); transition:transform 0.3s ease; display:flex; flex-direction:column; }
    .drawer-mask.open{display:block; }
    .drawer-mask.open .drawer-wrap{transform:translateX(0); }
    .drawer__header{padding:var(--spacing-md); border-bottom:1px solid var(--n2); display:flex; justify-content:space-between; align-items:center; }
    .drawer__body{padding:var(--spacing-md); flex:1; overflow-y:auto; }
    .drawer__close{cursor:pointer; color:var(--n5); }


    /* ====================== 【新增组件】Badge 徽标 ====================== */
    .badge-wrap{position:relative; display:inline-block; }
    .badge{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--error-500); color:var(--n0); font-size:12px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
    .badge-dot{width:8px; height:8px; min-width:auto; padding:0; }
    .badge-success{background:var(--success-500); }
    .badge-warning{background:var(--warning-500); }
    .badge-info{background:var(--color-primary); }


    /* ====================== 【新增组件】Avatar 头像 ====================== */
    .avatar{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--color-assist-3); color:var(--color-primary); font-weight:var(--font-weight-bold); overflow:hidden; }
    .avatar img{width:100%; height:100%; object-fit:cover; }
    .avatar-lg{width:48px; height:48px; font-size:20px; }
    .avatar-md{width:36px; height:36px; font-size:16px; }
    .avatar-sm{width:24px; height:24px; font-size:12px; }


    /* ====================== 【新增组件】Empty 空状态 ====================== */
    .empty{padding:var(--spacing-lg) 0; text-align:center; color:var(--n5); }
    .empty__icon{font-size:48px; color:var(--n3); margin-bottom:var(--spacing-sm); }
    .empty__desc{font-size:14px; }


    /* ====================== 【新增组件】Skeleton 骨架屏 ====================== */
    .skeleton{background:linear-gradient(90deg,var(--n1) 25%,var(--n2) 50%,var(--n1) 75%); background-size:200% 100%; animation:skeleton-loading 1.5s infinite; border-radius:var(--radius-xs); }
    @keyframes skeleton-loading{0%{background-position:200% 0; }
    100%{background-position:-200% 0; }
    }
    .skeleton__text{height:16px; margin-bottom:8px; }
    .skeleton__circle{width:40px; height:40px; border-radius:999px; }
    .skeleton__card{height:120px; }

    /* ====================== 【新增组件】Popover 气泡卡片 ====================== */
    .popover-wrap{position:relative; display:inline-block; }
    .popover-card{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:10px; min-width:200px; padding:var(--spacing-sm); background:var(--n0); border-radius:var(--radius-min); box-shadow:var(--shadow-3); z-index:70; opacity:0; visibility:hidden; transition:opacity 0.2s; }
    .popover-card__title{font-weight:var(--font-weight-bold); padding-bottom:var(--spacing-xs); border-bottom:1px solid var(--n2); margin-bottom:var(--spacing-xs); }
    .popover-wrap:hover .popover-card{opacity:1; visibility:visible; }

    /* ====================== 【新增组件】Timeline 时间线 ====================== */
    .timeline{padding-left:24px; position:relative; }
    .timeline::before{content:""; position:absolute; left:7px; top:0; bottom:0; width:2px; background:var(--n2); }
    .timeline-item{position:relative; padding-bottom:var(--spacing-md); }
    .timeline-item__dot{position:absolute; left:-24px; top:4px; width:16px; height:16px; border-radius:999px; background:var(--n2); border:2px solid var(--n0); }
    .timeline-item__dot--primary{background:var(--color-primary); }
    .timeline-item__dot--success{background:var(--success-500); }
    .timeline-item__dot--error{background:var(--error-500); }
    .timeline-item__title{font-weight:var(--font-weight-bold); color:var(--n7); }
    .timeline-item__desc{color:var(--n5); margin-top:4px; }

    /* ====================== 【新增组件】Slider 滑块 ====================== */
    .slider-wrap{width:320px; padding:10px 0; }
    .slider{position:relative; height:6px; background:var(--n2); border-radius:var(--radius-full); }
    .slider__track{position:absolute; left:0; height:100%; background:var(--color-primary); border-radius:var(--radius-full); }
    .slider__handle{position:absolute; top:50%; width:16px; height:16px; background:var(--n0); border:2px solid var(--color-primary); border-radius:999px; transform:translate(-50%,-50%); cursor:pointer; }
    .slider__handle:hover{box-shadow:0 0 0 4px rgba(var(--color-primary-rgb),0.15); }
    .dropdown-menu{z-index:var(--z-index-dropdown); }
    .popover-card{z-index:var(--z-index-popover); }
    .modal-mask{z-index:var(--z-index-modal); }
    .drawer-mask{z-index:var(--z-index-drawer); }