/* 基础设计 Token：颜色、圆角、阴影、字体等 */
:root {
    --td-brand-color: #0052d9;
    --td-brand-color-hover: #2e6ff2;
    --td-brand-color-focus: #0646b3;
    --td-success-color: #2ba471;
    --td-warning-color: #ed7b2f;
    --td-error-color: #e34d59;

    --td-bg-color-page: #f3f3f5;
    --td-bg-color-container: #ffffff;
    --td-bg-color-container-hover: #f9fafb;
    --td-bg-color-container-active: #f1f2f5;

    --td-border-color: #e5e6eb;
    --td-border-color-light: #f0f0f5;

    --td-text-color-primary: #1d2129;
    --td-text-color-secondary: #4e5969;
    --td-text-color-placeholder: #a8abb2;

    --td-radius-small: 4px;
    --td-radius-medium: 6px;
    --td-radius-large: 10px;

    --td-shadow-small: 0 1px 3px rgba(15, 23, 42, 0.08);
    --td-shadow-medium: 0 4px 12px rgba(15, 23, 42, 0.12);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background-color: var(--td-bg-color-page);
    color: var(--td-text-color-primary);
}

/* 布局壳：头部 / 侧边栏 / 内容区 / 底部 */
.t-layout-header {
    background: #ffffff;
    border-bottom: 1px solid var(--td-border-color-light);
    box-shadow: var(--td-shadow-small);
}

.t-layout-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.t-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.t-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-text-color-primary);
}

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

.t-layout-sider {
    background: #ffffff;
    border-right: 1px solid var(--td-border-color-light);
}

.t-layout-content {
    background: var(--td-bg-color-page);
}

.t-layout-footer {
    background: #ffffff;
    border-top: 1px solid var(--td-border-color-light);
    color: var(--td-text-color-secondary);
    font-size: 12px;
}

/* 头部图标按钮，参考 TDesign Button/IconButton 风格 */
.t-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--td-text-color-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.t-icon-btn:hover {
    color: var(--td-brand-color);
    border-color: rgba(0, 82, 217, 0.15);
    background: rgba(0, 82, 217, 0.04);
}

.t-icon-btn i {
    font-size: 16px;
}

/* 用户信息区域 */
.t-header-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.t-header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--td-border-color-light);
}

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

.t-header-username {
    font-size: 13px;
    color: var(--td-text-color-primary);
}

/* 侧边菜单，贴近 TDesign Menu 风格 */
.t-side-menu {
    padding-top: 8px;
}

.t-side-menu-group-title {
    padding: 8px 20px 4px;
    font-size: 12px;
    color: var(--td-text-color-placeholder);
    font-weight: 500;
    letter-spacing: 0.4px;
}

.t-side-menu .layui-nav-item > a {
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: 38px;
    line-height: 38px;
    position: relative;
    color: var(--td-text-color-secondary);
}

.t-side-menu .layui-nav-item > a .layui-icon {
    font-size: 16px;
    margin-right: 10px;
    color: inherit;
}

.t-side-menu .layui-nav-item > a cite {
    flex: 1;
    font-style: normal;
}

.t-side-menu .layui-nav-item > a:hover {
    background-color: rgba(0, 82, 217, 0.04);
    color: var(--td-brand-color);
}

.t-side-menu .layui-nav-item.layui-this > a,
.t-side-menu .layui-nav-item > a.layui-this {
    background-color: rgba(0, 82, 217, 0.06);
    color: var(--td-brand-color);
}

.t-side-menu .layui-nav-item.layui-this > a::before,
.t-side-menu .layui-nav-item > a.layui-this::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--td-brand-color);
}

/* 自研 / 官方 / 免费 标签 TDesign 化 */
.encrypt-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    margin-left: 8px;
    font-weight: 500;
}

.encrypt-tag.tag-blue {
    background: rgba(0, 82, 217, 0.06);
    color: var(--td-brand-color);
}

.encrypt-tag.tag-orange {
    background: rgba(237, 123, 47, 0.06);
    color: var(--td-warning-color);
}

.encrypt-tag.tag-green {
    background: rgba(43, 164, 113, 0.06);
    color: var(--td-success-color);
}

/* 通用卡片风格 */
.t-card {
    background: #ffffff;
    border-radius: var(--td-radius-large);
    border: 1px solid var(--td-border-color-light);
    box-shadow: var(--td-shadow-small);
}

.t-card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--td-border-color-light);
    font-size: 14px;
    font-weight: 500;
    color: var(--td-text-color-primary);
}

.t-card-body {
    padding: 16px;
}

/* 通用主按钮 / 次要按钮风格 */
.t-btn-primary {
    background: var(--td-brand-color);
    border-color: var(--td-brand-color);
    color: #ffffff;
    border-radius: var(--td-radius-medium);
}

.t-btn-primary:hover {
    background: var(--td-brand-color-hover);
    border-color: var(--td-brand-color-hover);
}

.t-btn-outline {
    background: #ffffff;
    border-color: var(--td-border-color);
    color: var(--td-text-color-secondary);
    border-radius: var(--td-radius-medium);
}

.t-btn-outline:hover {
    border-color: var(--td-brand-color);
    color: var(--td-brand-color);
}

/* 消息提示（layer.msg）TDesign 风格统一 */
.layui-layer-msg {
    border-radius: var(--td-radius-medium) !important;
    background-color: #ffffff !important;
    box-shadow: var(--td-shadow-medium) !important;
    border: 1px solid var(--td-border-color-light) !important;
    padding: 10px 16px !important;
    min-width: 240px;
}

.layui-layer-msg .layui-layer-content {
    font-size: 13px;
    color: var(--td-text-color-primary);
    /* 默认场景不再额外预留图标宽度，避免左侧出现大片空白 */
    padding-left: 16px !important;
    line-height: 1.5;
}

.layui-layer-msg .layui-layer-ico {
    /* 固定在左侧，和内容区错位 */
    left: 14px !important;
    top: 50% !important;
    margin-top: -12px !important; /* 约等于一半高度，实现垂直居中 */
}

/* 成功 / 警告 / 错误 图标色 */
.layui-layer-msg .layui-layer-ico1 {
    /* 成功 */
    background-color: transparent !important;
    color: var(--td-success-color);
}

.layui-layer-msg .layui-layer-ico2 {
    /* 错误 */
    background-color: transparent !important;
    color: var(--td-error-color);
}

.layui-layer-msg .layui-layer-ico0,
.layui-layer-msg .layui-layer-ico3,
.layui-layer-msg .layui-layer-ico4,
.layui-layer-msg .layui-layer-ico5,
.layui-layer-msg .layui-layer-ico6 {
    /* 其它提示 / 信息 */
    background-color: transparent !important;
    color: var(--td-brand-color);
}

/* ===================================== */
/* layer.open 弹窗 TDesign 对话框风格统一 */
/* ===================================== */

/* 弹窗外层：圆角 + 阴影 + 边框 + 背景 */
.layui-layer.layui-layer-page,
.layui-layer.layui-layer-dialog {
    border-radius: var(--td-radius-large) !important;
    box-shadow: var(--td-shadow-medium) !important;
    border: 1px solid var(--td-border-color-light) !important;
    background-color: #ffffff !important;
    overflow: hidden;
}

/* 标题栏：高度、字体、边框风格贴近 TDesign Dialog */
.layui-layer-title {
    height: 46px;
    line-height: 46px;
    padding: 0 20px;
    border-bottom: 1px solid var(--td-border-color-light) !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--td-text-color-primary) !important;
    background-color: #ffffff !important;
}

/* 右上角关闭按钮 */
.layui-layer-setwin .layui-layer-close1,
.layui-layer-setwin .layui-layer-close2 {
    width: 32px;
    height: 32px;
    right: 10px;
    top: 7px;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.layui-layer-setwin .layui-layer-close1:hover,
.layui-layer-setwin .layui-layer-close2:hover {
    background-color: rgba(0, 82, 217, 0.06);
}

/* 内容区域：留出合理内边距（通用） */
.layui-layer-content {
    padding: 16px 20px !important;
    font-size: 13px;
    color: var(--td-text-color-secondary);
}

/* 带图标的对话框（layer.open / layer.confirm 等）避免图标与文字重叠 */
.layui-layer-dialog .layui-layer-content {
    position: relative;
    /* 左侧为图标预留空间 */
    padding: 16px 20px 16px 60px !important;
}

.layui-layer-dialog .layui-layer-content .layui-layer-ico {
    position: absolute;
    left: 24px;
    /* 与文本行垂直对齐，而不是整个内容区域居中 */
    top: 18px;
    width: 30px;
    height: 30px;
}

/* 按钮区域：对齐 + 间距，模拟 TDesign ButtonGroup（通用弹窗） */
.layui-layer-btn {
    padding: 10px 20px 16px !important;
    text-align: right;
    border-top: 1px solid var(--td-border-color-light);
}

.layui-layer-btn a {
    min-width: 76px;
    height: 30px;
    line-height: 30px;
    padding: 0 14px;
    border-radius: var(--td-radius-medium) !important;
    font-size: 13px;
    margin-left: 8px;
}

/* 主按钮：确认 / 是 */
.layui-layer-btn .layui-layer-btn0 {
    background-color: var(--td-brand-color) !important;
    border-color: var(--td-brand-color) !important;
    color: #ffffff !important;
}

.layui-layer-btn .layui-layer-btn0:hover {
    background-color: var(--td-brand-color-hover) !important;
    border-color: var(--td-brand-color-hover) !important;
}

/* 次按钮：取消 / 否 */
.layui-layer-btn .layui-layer-btn1,
.layui-layer-btn .layui-layer-btn2 {
    background-color: #ffffff !important;
    border-color: var(--td-border-color) !important;
    color: var(--td-text-color-secondary) !important;
}

.layui-layer-btn .layui-layer-btn1:hover,
.layui-layer-btn .layui-layer-btn2:hover {
    border-color: var(--td-brand-color) !important;
    color: var(--td-brand-color) !important;
}

/* ========================= */
/* layer.msg 内按钮样式优化  */
/* ========================= */

/* 去掉顶部边框，整体更像“消息条”而不是对话框 */
.layui-layer-msg .layui-layer-btn {
    padding: 8px 0 0 !important;
    margin-top: 4px;
    border-top: none !important;
    text-align: right;
}

/* 针对 <div class="layui-layer-btn layui-layer-btn-">确定取消</div> 这种结构，
   让整行文字在可用宽度内居中显示，避免左侧出现大块空白 */
.layui-layer-msg .layui-layer-btn.layui-layer-btn- {
    /* 占满整行，并用 flex 做真正的水平居中 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    /* 去掉左右 padding/margin，避免左侧多余空白 */
    padding: 8px 0 0 !important;
    margin: 4px 0 0 !important;
    text-align: center !important;
}

/* 兜底：无论是否在 .layui-layer-msg 内，只要是 layui-layer-btn- 就统一做整行居中，
   处理类似 <div class="layui-layer-btn layui-layer-btn-">确定取消</div> 的情况 */
.layui-layer-btn.layui-layer-btn- {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 8px 0 10px !important;
    margin: 0 !important;
    text-align: center !important;
}

/* 按钮稍微瘦一点，字号略小，贴近 TDesign Message 的操作按钮风格 */
.layui-layer-msg .layui-layer-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    height: 26px;
    padding: 0 12px;
    line-height: 1;
    font-size: 12px;
    border-radius: var(--td-radius-small) !important;
    margin-left: 6px;
}

/* 遮罩层轻微暗化，贴近 TDesign 蒙层 */
.layui-layer-shade {
    background-color: rgba(15, 23, 42, 0.45) !important;
}