/* Bio.UI 统一设计令牌（Design Tokens） */
:root {
    /* 品牌色 */
    --bio-primary: #18b797;
    --bio-primary-rgb: 24, 183, 151;
    --bio-secondary: #1AB394;
    --bio-accent: #1C84C6;

    /* 文本 */
    --bio-text-primary: #333333;
    --bio-text-secondary: #666666;
    --bio-text-muted: #999999;
    --bio-text-disabled: #bbbbbb;

    /* 背景 */
    --bio-bg-page: #F5F5F5;
    --bio-bg-card: #FFFFFF;
    --bio-bg-hover: #f5f5f5;
    --bio-bg-selected: rgba(24, 183, 151, 0.08);
    --bio-bg-surface: #f9f9f9;
    --bio-bg-highlight: #F1FBF9;

    /* 边框 */
    --bio-border: #cccccc;
    --bio-border-light: #e0e0e0;
    --bio-divider: #eeeeee;

    /* 状态色 */
    --bio-success: #23C6C8;
    --bio-error: #ED5565;
    --bio-warning: #f8ac59;
    --bio-info: #1C84C6;

    /* 侧边栏 */
    --bio-sidebar-bg: #266F5E;
    --bio-sidebar-active-bg: #0D483A;

    /* 布局尺寸 */
    --bio-topbar-height: 64px;
    --bio-sidebar-width: 200px;
    --bio-content-padding: 12px;
    --bio-radius: 4px;

    /* 字体 */
    --bio-font-size-sm: 12px;
    --bio-font-size-base: 14px;
    --bio-font-size-lg: 16px;
    --bio-font-size-xl: 18px;
}

/* 通用按钮 */
.bio-btn {
    height: 40px;
    font-size: var(--bio-font-size-base);
    border-radius: var(--bio-radius);
    border: none;
    cursor: pointer;
    padding: 0 16px;
    transition: opacity 0.2s;
}

.bio-btn-primary {
    background-color: var(--bio-primary);
    color: #fff;
}

.bio-btn-primary:hover {
    opacity: 0.85;
}

.bio-btn-outline {
    border: 1px solid var(--bio-primary);
    background-color: #fff;
    color: var(--bio-primary);
}

.bio-btn-outline:hover {
    background-color: var(--bio-primary);
    color: #fff;
}

/* 通用输入框 */
.bio-input {
    height: 40px;
    border: 1px solid var(--bio-border);
    border-radius: var(--bio-radius);
    font-size: var(--bio-font-size-base);
    padding: 0 12px;
    transition: border-color 0.2s;
}

.bio-input:focus {
    border-color: var(--bio-primary);
    outline: none;
}

/* 文本色工具类 */
.bio-text-muted { color: var(--bio-text-muted); }
.bio-text-secondary { color: var(--bio-text-secondary); }
.bio-text-disabled { color: var(--bio-text-disabled); }

/* 背景色工具类 */
.bio-bg-page { background-color: var(--bio-bg-page); }
.bio-bg-surface { background-color: var(--bio-bg-surface); }

/* DataGrid 表格居中 */
.bio-table-centered .mud-table-cell { text-align: center; }

/* Gap 工具类 */
.bio-gap-1 { gap: 4px; }
.bio-gap-2 { gap: 8px; }
.bio-gap-3 { gap: 12px; }
.bio-gap-4 { gap: 16px; }

/* 滚动条 */
.bio-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.bio-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 0.8);
    border-radius: 4px;
}

.bio-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--bio-primary);
}

.bio-scrollbar::-webkit-scrollbar-track {
    background-color: rgba(245, 245, 245, 0.2);
    border-radius: 4px;
}

/* 最小化栅格系统 - 表单引擎 col-N 类依赖 */
.col-1  { flex: 0 0 auto; width: 8.333333%; }
.col-2  { flex: 0 0 auto; width: 16.666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.333333%; }
.col-5  { flex: 0 0 auto; width: 41.666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.333333%; }
.col-8  { flex: 0 0 auto; width: 66.666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }