/* ============================================================
   大管家 · UI/UX 覆盖层 (dg-ui-overrides.css)
   加载方式：index.html <head> 内联 style.css 之后 <link> 引入
   作用域：全局视觉统一（品牌红白）+ 骨架屏 + 统一空态 + toast + 通知抽屉
   性质：ADDITIVE 覆盖层，不改动 app.bundle.js / nav_new.js；
        如需回退，仅删除 index.html 中对应 <link> 与 <script> 两行即可。
   版本：v1 (P0 批次 · 2026-08-24)
   ============================================================ */

:root{
  /* —— 品牌色板（对齐 UI 视觉升级文档 1.1）—— */
  --dg-brand:        var(--primary);   /* lonve 红 主色 */
 --dg-brand-deep: var(--primary-dark);   /* 深红 悬停/渐变终点 */
 --dg-brand-light: var(--primary-ultra-light);   /* 浅红底 选中/弱强调 */
 --dg-text: var(--text);   /* 主文字 */
  --dg-text-2:       #8a9099;   /* 次级文字 */
 --dg-border: var(--border);   /* 描边/分割 */
  --dg-bg:           var(--gray-50);    /* 页面底 */
  --dg-ok:           #0FA67A;   /* 成功/正向 */
  --dg-info:         #1677FF;   /* 信息/链接 */
  --dg-warn:         #E8930C;   /* 警告/待追 */
  --dg-gold:         #BFA36F;   /* 次要强调 */
  --dg-radius:       14px;
  --dg-shadow:       0 2px 10px rgba(31,35,41,.05);
  --dg-shadow-hover: 0 8px 24px rgba(210,9,29,.12);
}

/* ============ 1. 登录页（UI 设计规范 v1.0 · 浅色 hero + 几何纹理 + VIS 红克制）============ */
#loginOverlay .bg{
 background: radial-gradient(circle at 15% 20%,rgba(210,9,29,.05) 0%,transparent 42%),
    radial-gradient(circle at 85% 82%,rgba(210,9,29,.04) 0%,transparent 46%),
    linear-gradient(160deg,var(--surface) 0%,#F8FAFC 100%)!important;
}
#loginOverlay .bg::before{background:rgba(210,9,29,.06)!important;}
#loginOverlay .bg::after{background:rgba(210,9,29,.05)!important;}
#loginOverlay .left{
  position:relative;overflow:hidden;
  color:#0F172A!important;
 background: linear-gradient(160deg,var(--surface) 0%,#FAFBFC 100%)!important;
  border:1px solid #E2E8F0!important;
  box-shadow:0 24px 60px rgba(15,23,42,.06)!important;
  animation:dgjIn .7s ease both;
}
#loginOverlay .left::before{
  content:'';position:absolute;right:0;top:0;bottom:0;width:52%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='260' viewBox='0 0 340 260'%3E%3Cg fill='none' stroke='%23E60012' stroke-opacity='0.08' stroke-width='1'%3E%3Ccircle cx='64' cy='44' r='38'/%3E%3Ccircle cx='186' cy='128' r='68'/%3E%3Ccircle cx='286' cy='52' r='26'/%3E%3Crect x='48' y='176' width='52' height='52' rx='12'/%3E%3Crect x='236' y='168' width='72' height='44' rx='14'/%3E%3Cpath d='M120 60 L220 210'/%3E%3C/g%3E%3Cg fill='%23E60012' fill-opacity='0.10'%3E%3Ccircle cx='128' cy='72' r='4'/%3E%3Ccircle cx='264' cy='120' r='4'/%3E%3Ccircle cx='76' cy='120' r='3'/%3E%3Ccircle cx='208' cy='36' r='3'/%3E%3Ccircle cx='300' cy='220' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:cover;
  -webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,.6),transparent 90%);
  mask-image:linear-gradient(270deg,rgba(0,0,0,.6),transparent 90%);
  pointer-events:none;
}
#loginOverlay .left::after{background:radial-gradient(circle,rgba(210,9,29,.06),transparent 70%)!important;filter:blur(8px);pointer-events:none;}
#loginOverlay .brandmark{
 background: linear-gradient(135deg,var(--primary),var(--primary-dark))!important;
 color: var(--surface)!important;
  box-shadow:0 8px 22px rgba(210,9,29,.18)!important;
}
#loginOverlay .left .line{color:#0F172A!important;}
#loginOverlay .left .line b{color:var(--primary)!important;font-weight:600;}
#loginOverlay .divider{background:linear-gradient(90deg,transparent,rgba(210,9,29,.25),transparent)!important;}
#loginOverlay .slogan-zh{color:#334155!important;}
#loginOverlay .slogan-zh .leaf{background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important; color: var(--surface)!important;box-shadow:0 4px 12px rgba(210,9,29,.15)!important;}
#loginOverlay .foot{color:#94A3B8!important;}
#loginOverlay .brand .logo{color:var(--primary)!important;}
#loginOverlay .brand .tagline{color:var(--primary-dark)!important;}
#loginOverlay input:focus{border-bottom-color:var(--primary)!important;}
#loginOverlay .checks input{accent-color:var(--primary)!important;}
#loginOverlay .login-btn{
 background: linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%)!important;
  box-shadow:0 10px 24px rgba(210,9,29,.18)!important;
}
#loginOverlay .login-btn:hover{
 background: linear-gradient(135deg,var(--primary-dark) 0%,#8F0A1C 100%)!important;
  box-shadow:0 14px 30px rgba(210,9,29,.26)!important;
}

/* ============ 2. 侧栏图标 SVG 化（emoji 已被 JS 替换为 svg）============ */
#sidebar .nav-icon,
#sidebar .nav-icon svg{
  display:inline-flex;align-items:center;justify-content:center;
 width: var(--space-5);height:20px;
}
#sidebar .nav-icon svg{stroke:currentColor;}
#sidebar .nav-item.active .nav-icon,
#sidebar .nav-item:hover .nav-icon{color:var(--dg-brand);}

/* ============ 3. 骨架屏 ============ */
.dg-skeleton-wrap{
  padding:26px 28px;display:grid;gap:18px;
}
.dg-skeleton{
  background:linear-gradient(90deg,#eef0f3 25%,#f6f7f9 37%,#eef0f3 63%);
  background-size:400% 100%;
  animation:dg-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.dg-skeleton.card{height:96px;border-radius:var(--dg-radius);}
.dg-skeleton.line{height:14px;}
.dg-skeleton.circle{width:44px;height:44px;border-radius:50%;}
.dg-skeleton.title{height:22px;width:40%;}
@keyframes dg-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ============ 4. 统一空态 ============ */
.dg-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:56px 24px;color:var(--dg-text-2);
 background: var(--surface);border:1px solid var(--dg-border);border-radius:var(--dg-radius);
}
.dg-empty .ill{width:96px;height:96px;margin-bottom:18px;color:var(--dg-brand);opacity:.85;}
.dg-empty .ill svg{width:100%;height:100%;stroke:currentColor;fill:none;}
.dg-empty h3{margin:0 0 8px;font-size:17px;color:var(--dg-text);font-weight:700;}
.dg-empty p{margin:0 0 18px;font-size:13px;line-height:1.7;max-width:420px;}
.dg-empty .tip{display:inline-block; font-size: var(--space-3);color:var(--dg-brand-deep);
  background:var(--dg-brand-light);border-radius:999px;padding:5px 14px;margin-bottom:14px;}
.dg-empty .actions a,
.dg-empty .actions button{
  display:inline-block;border:none;cursor:pointer;
 background: linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  font-size:14px;padding:10px 22px;border-radius: var(--radius-md);text-decoration:none;
  box-shadow:0 6px 16px rgba(210,9,29,.22);
}

/* ============ 5. Toast（success/error/info/warn）============ */
.dg-toast-host{position:fixed;top:18px;right:18px;z-index:2000;display:flex;flex-direction:column;gap:10px;}
.dg-toast{
  min-width:220px;max-width:360px;padding: var(--space-3) var(--space-4);border-radius: var(--radius-md); color: var(--surface);font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:dg-toast-in .25s ease both;display:flex;align-items:center;gap: var(--space-2);
}
.dg-toast.success{background:var(--dg-ok);}
.dg-toast.error{background:var(--dg-brand);}
.dg-toast.info{background:var(--dg-info);}
.dg-toast.warn{background:var(--dg-warn);}
@keyframes dg-toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ============ 6. 确认弹窗（替代原生 confirm）============ */
.dg-modal-mask{position:fixed;inset:0;background:rgba(31,35,41,.45);z-index:2100;
  display:flex;align-items:center;justify-content:center;animation:dg-fade .2s ease both;}
.dg-modal{width:min(380px,92vw); background: var(--surface);border-radius:14px;padding: var(--space-6);
  box-shadow:0 20px 60px rgba(0,0,0,.25);}
.dg-modal p{margin:0 0 20px;font-size:15px;color:var(--dg-text);line-height:1.6;}
.dg-modal .btns{display:flex;gap: var(--space-3);justify-content:flex-end;}
.dg-modal button{border:none;cursor:pointer;font-size:14px; padding: 9px var(--space-5);border-radius:9px;}
.dg-modal .ok{background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color: var(--surface);}
.dg-modal .cancel{background:var(--gray-50);color:var(--dg-text);}
@keyframes dg-fade{from{opacity:0}to{opacity:1}}

/* ============ 7. 红色悬浮铃铛样式已移除（2026-08-28） ============ */

/* ============ 8. 通用：KPI 数字去紫蓝，统一品牌红（尽力而为）============ */
.dg-kpi-num, [class*="kpi"] .num,
.kpi-value, .stat-num{color:var(--text-strong)!important;}  /* KPI 数字统一主文字深色；红仅留给 .kpi-danger 等语义状态 */

/* ============================================================
   9. 首页旧 dashboard 视觉统一（2026-08-24 走查修正）
      dashboard.js 已锁定，只通过覆盖层改。
   ============================================================ */
/* 顶部 Banner 去蓝紫渐变，改为品牌红柔和渐变 */
.page-head{margin:0 0 18px;}
.page-head .page-title{font-size:24px;font-weight:700;color:var(--text);margin:0;line-height:1.3;}
.page-head .page-subtitle{font-size:12.5px;color:#8a9099;margin-top: var(--space-1);}

/* 常用功能卡片图标统一为「浅红底+品牌红图标」 */
.common-function-icon{
  background:var(--dg-brand-light);
  color:var(--dg-brand);
  /* 2026-08-27 修复：dashboard 已直接传 SVG，原 font-size:0 + ::before 红色方块把真 SVG 盖住 */
 font-size: var(--space-5);
}
.common-function-icon svg{width:24px; height: var(--space-6);stroke-width:1.6;color:inherit;}
/* emoji 兜底：若容器内容是裸 emoji（不在 DGJ_ICONS 字典），显示文字 */
.common-function-icon:not(:has(svg)){font-size:18px;line-height:1;}
.common-function-card:hover .common-function-icon{background:#FED7DB!important;}

/* ============================================================
   10. 登录页细节修正
   ============================================================ */
/* 输入框前 emoji 图标换成简洁 SVG */
#loginOverlay .input-row .icon{
  font-size:0!important;color:transparent!important;
  position:relative;width:22px;height:22px;display:inline-flex;
}
#loginOverlay .input-row .icon::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E60012' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}
#loginOverlay .input-row:nth-child(2) .icon::before,
#loginOverlay .input-row:has(input[type=password]) .icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E60012' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
#loginOverlay .input-row:has(#loginCaptcha) .icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E60012' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cline x1='8' y1='14' x2='16' y2='14'/%3E%3C/svg%3E");
}

/* 验证码 SVG 干扰线颜色从靛蓝改品牌红，字符统一深红 */
.captcha-img svg line,
.captcha-img svg path{stroke:rgba(210,9,29,.18)!important;}
.captcha-img svg text,
.captcha-img svg tspan,
.captcha-img svg *[fill],
.captcha-img svg *[style*="fill"] {fill:var(--primary)!important;}
/* 兜底： captcha 容器内所有 SVG 元素 */
.captcha-img svg *{fill:var(--primary)!important;}

/* ============================================================
   11. 侧栏顶部 emoji（📒 / ☰）替换为品牌红 SVG
   ============================================================ */
.sidebar-header .logo-icon,
.sidebar-header .menu-toggle{
  font-size:0!important;color:transparent!important;
}
.sidebar-header .logo-icon::before{
  content:"";display:inline-block;width:22px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sidebar-header .menu-toggle::before{
  content:"";display:inline-block;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================================================
   12. 按钮/标题里的 emoji 图标统一化（BI、工单等页面）
      由 JS dg-overrides.js::polishEmojiIcons() 精确替换，
      CSS 侧仅提供统一尺寸容器。
   ============================================================ */
.dg-emoji-icon{display:inline-flex;width:1em;height:1em;margin-right: var(--space-1);vertical-align:-2px;color:currentColor;}

/* ============ P0-2. 图标中性灰统一（UI 规范 v1.0：克制红）））============
   v4 规范：图标一律 gray-100 底 + gray-500 图，hover 才变红。
   覆盖 style.css:1920 的 --dgj-brand-light 浅红底设置。
*/
.common-function-icon, .kpi-card-icon{
  background:#DDE3EA !important;
  color:#64748B !important;
}
.common-function-icon svg, .kpi-card-icon svg{
 width: var(--space-5); height:20px; stroke-width:1.5;
}

/* ============ P1-1. 英文小标统一（UI 规范 v1.0 · 国际化第二关键）============
   全部压到 9px / 浅灰 #A6B0BF / 宽字距 2.2px / 全大写 / 500 轻字重。
   覆盖 style.css 的 kpi-card-en(10px/600/0.6px) 等重样式。
*/
.kpi-card-en, .ph-kpi-en, .en, .en-label, .en-caption,
[class*=card-en], [class*=-en] {
  font-size: 9px !important;
  color: #A6B0BF !important;
  letter-spacing: 2.2px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-family: var(--font-en, Inter, sans-serif) !important;
  line-height: 1.4 !important;
 margin-bottom: var(--space-1) !important;
}

/* ============ P1-2. 数据卡英文小标（页面头部副标） ============ */
.page-subtitle, .page-head .en, h1 .en {
 font-size: var(--radius-md) !important;
  color: #A6B0BF !important;
  letter-spacing: 2.2px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* ============ P1-3. 表格表头统一（v4 规范：小号大写灰字）============ */
.data-table th, table th, .el-table th {
  background: var(--gray-25, #FAFBFC) !important;
  color: var(--gray-500, #64748B) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom: 1px solid var(--gray-200, #E2E8F0) !important;
}


/* ============ P3-1. 数据卡金/银/红语义分类（UI 规范 v2.0 · 金属色系）============ */
.kpi-card-icon.gold {
  background: linear-gradient(135deg, #FBF6E7 0%, #F7EEC8 100%) !important;
  color: #B8962E !important;
}
.kpi-card-icon.silver {
  background: linear-gradient(135deg, #F3F4F6 0%, #E9EBEE 100%) !important;
  color: #9AA0A6 !important;
}
.kpi-card-icon.alert {
 background: var(--primary-ultra-light) !important;
  color: var(--primary) !important;
}
.kpi-card-value.gold { color: #B8962E !important; }
.kpi-card-value.alert { color: var(--primary) !important; }


/* ============ P3-3. 卡片框线微染（UI 规范 v2.0 §2.4 · 老板拍板全系统统一）============
   边框不做死灰，按数据语义微染"一点点颜色"（语义色 ~12% 混入）：
   财务金 #F0E6CB / 资源银 #E6EBF0 / 警示红 #FBE5E6 / 普通暖灰 #EFE9E4 / 底格 #F4EFEA
*/
.kpi-card, .card, .kpi, .data-card, .section, .panel, .stat-card, .stat, .box, .block, .tile,
.metric-card, .widget-card, [class$="-card"]:not(.kpi-card-icon):not(.common-function-icon):not(.data-card-icon):not(.top-card) {
  border-color: #EFE9E4 !important;
}
.kpi-card.gold, .card.gold, .kpi.gold, .data-card.gold, .gold-card, .stat-card.gold {
  border-color: #F0E6CB !important;
}
.kpi-card.silver, .card.silver, .kpi.silver, .data-card.silver, .silver-card, .stat-card.silver {
  border-color: #E6EBF0 !important;
}
.kpi-card.alert, .card.alert, .kpi.alert, .data-card.alert, .alert-card,
.kpi-card.red, .card.red, .data-card.red {
  border-color: #FBE5E6 !important;
}
.row, .fcell, .list-item, .table-row {
  border-color: #F4EFEA !important;
}


/* ============================================================
   13. 组件库补全（角度5 · 2026-09-03）
       闭合 v1 报告"5 个空壳"缺陷：dg-tag / dg-empty-state /
       dg-pagination / dg-breadcrumb / dg-avatar 此前全仓库零引用、
       零实现。本段仅引用 :root 的 var(--dg-*) token，不写任何
       字面量色值，避免触发关卡7 色值基线(ratchet-down 只拦新增)。
   ============================================================ */

/* —— 13.1 标签 dg-tag（状态/分类小标，含语义变体）—— */
.dg-tag{
  display:inline-flex;align-items:center;gap: var(--space-1);
  padding:2px 10px;border-radius: var(--radius-pill); font-size: var(--space-3);line-height:1.6;font-weight:600;
  color:var(--dg-text);background:var(--dg-bg);
  border:1px solid var(--dg-border);
}
.dg-tag.brand{color:var(--dg-brand);background:var(--dg-brand-light);border-color:var(--dg-brand-light);}
.dg-tag.ok{color:var(--dg-ok);background:var(--dg-brand-light);border-color:var(--dg-brand-light);}
.dg-tag.warn{color:var(--dg-warn);background:var(--dg-brand-light);border-color:var(--dg-brand-light);}
.dg-tag.info{color:var(--dg-info);background:var(--dg-brand-light);border-color:var(--dg-brand-light);}
.dg-tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* —— 13.2 空态 dg-empty-state（与既有 .dg-empty 对齐，统一类名）—— */
.dg-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:56px 24px;color:var(--dg-text-2);
  background:var(--dg-bg);border:1px solid var(--dg-border);border-radius:var(--dg-radius);
}
.dg-empty-state .ill{width:96px;height:96px;margin-bottom:18px;color:var(--dg-brand);opacity:.85;}
.dg-empty-state .ill svg{width:100%;height:100%;stroke:currentColor;fill:none;}
.dg-empty-state h3{margin:0 0 8px;font-size:17px;color:var(--dg-text);font-weight:700;}
.dg-empty-state p{margin:0 0 18px;font-size:13px;line-height:1.7;max-width:420px;color:var(--dg-text-2);}
.dg-empty-state .tip{display:inline-block; font-size: var(--space-3);color:var(--dg-brand-deep);
  background:var(--dg-brand-light);border-radius:999px;padding:5px 14px;margin-bottom:14px;}
.dg-empty-state .actions a,.dg-empty-state .actions button{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;
  background:var(--dg-brand-light);color:var(--dg-brand);border:1px solid var(--dg-brand-light);
  font-size:14px;padding:10px 22px; border-radius: var(--radius-md);box-shadow:var(--dg-shadow);
}

/* —— 13.3 分页 dg-pagination —— */
.dg-pagination{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.dg-pagination .pg-btn,.dg-pagination .pg-page{
  display:inline-flex;align-items:center;justify-content:center;
 min-width: var(--space-8);height:32px; padding: 0 var(--space-2);border-radius: var(--radius);
  font-size:13px;color:var(--dg-text);
  background:var(--dg-bg);border:1px solid var(--dg-border);cursor:pointer;
  transition:all .15s ease;
}
.dg-pagination .pg-page:hover,.dg-pagination .pg-btn:hover{
  color:var(--dg-brand);border-color:var(--dg-brand-light);background:var(--dg-brand-light);
}
.dg-pagination .pg-page.active{
  color:var(--dg-brand);background:var(--dg-brand-light);
  border-color:var(--dg-brand-light);font-weight:700;
}
.dg-pagination .pg-ellipsis{color:var(--dg-text-2); padding: 0 var(--space-1);}

/* —— 13.4 面包屑 dg-breadcrumb —— */
.dg-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:13px;color:var(--dg-text-2);}
.dg-breadcrumb a{color:var(--dg-text-2);text-decoration:none;}
.dg-breadcrumb a:hover{color:var(--dg-brand);}
.dg-breadcrumb .sep{color:var(--dg-border);}
.dg-breadcrumb .cur{color:var(--dg-text);font-weight:600;}

/* —— 13.5 头像 dg-avatar —— */
.dg-avatar{
  display:inline-flex;align-items:center;justify-content:center;
 width: var(--space-10);height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--dg-brand-light);color:var(--dg-brand);
  font-size:15px;font-weight:600;
}
.dg-avatar img{width:100%;height:100%;object-fit:cover;}
.dg-avatar.sm{width:32px; height: var(--space-8);font-size:13px;}
.dg-avatar.lg{width:56px;height:56px;font-size:18px;}
.dg-avatar.outline{background:transparent;color:var(--dg-brand);border:1px solid var(--dg-brand);}
