/* =====================================================================
   余烬模板 · UI Layer  —  按钮语汇 / 加载语汇
   参考 scaffold-master 的三条克制原则：
     1. 不做渐变，实底 + 一道顶部发丝高光就够了；
     2. 语义色只承担「分类」，不承担「重要性」；
     3. 每屏只允许一个视觉主角 → 只有主操作按钮是实心，其余降一档为软底。
   加载只保留三种形态，全站不出现第四种：
     环（遮罩等待）、条（页面/请求切换）、弧（按钮提交中）。
   纯叠加层：不改 DOM、不碰业务脚本。样式失效时退回 fd-ink 原样。
   ===================================================================== */

/* ── 0. 令牌补全 ───────────────────────────────────────────────────── */
:root{
  /* fd-ink 里 --on-ember:var(--on-ember) 是自引用，值是空的，
     导致所有实心按钮的 color 声明失效、靠继承碰运气。这里补上。 */
  --on-ember:#FFFFFF;

  --ok:#2FBF71;      --ok-soft:rgba(47,191,113,.18);  --ok-line:rgba(47,191,113,.42);  --ok-fg:#6BD3A1;
  --bad:#F0553F;     --bad-soft:rgba(240,85,63,.18);  --bad-line:rgba(240,85,63,.42);  --bad-fg:#F5927F;
  --warn:#F0B429;    --warn-soft:rgba(240,180,41,.17);--warn-line:rgba(240,180,41,.40);--warn-fg:#E9C27D;
  --info2:#4C8DFF;   --info-soft:rgba(76,141,255,.17);--info-line:rgba(76,141,255,.40);--info-fg:#8FB3EF;

  --btn-hair:rgba(255,255,255,.18);      /* 顶部发丝高光 */
  --btn-press:rgba(0,0,0,.30);           /* 按下时的内阴影 */
  --btn-ghost-bg:var(--ink-700);
  --btn-ghost-bg-h:var(--ink-650);
  --load-veil:rgba(6,8,11,.74);
  --card-veil:#141A23;
}
:root[data-theme="light"]{
  --ok-soft:rgba(14,138,79,.12);   --ok-line:rgba(14,138,79,.32);   --ok-fg:#0B7A46;
  --bad-soft:rgba(192,42,17,.10);  --bad-line:rgba(192,42,17,.28);  --bad-fg:#A82410;
  --warn-soft:rgba(138,91,0,.11);  --warn-line:rgba(138,91,0,.30);  --warn-fg:#7A5000;
  --info-soft:rgba(29,87,208,.09); --info-line:rgba(29,87,208,.26); --info-fg:#1A4CB8;

  --btn-hair:rgba(255,255,255,.55);
  --btn-press:rgba(17,24,39,.16);
  --load-veil:rgba(244,246,250,.72);
  --card-veil:#FFFFFF;
}

/* ── 1. 基座：所有按钮共用同一套几何 ──────────────────────────────── */
.btn,
.layui-btn,
.el-button{
  position:relative;
  border-radius:var(--r-sm) !important;
  font-family:var(--sans);
  font-weight:600 !important;
  letter-spacing:.01em;
  background-image:none !important;      /* 注销 bootstrap3 的 180deg 渐变 */
  text-shadow:none !important;
  filter:none !important;                /* 注销 fd-ink 的 brightness 悬停 */
  box-shadow:inset 0 1px 0 var(--btn-hair) !important;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease,
             box-shadow .18s ease, transform .18s cubic-bezier(.22,1,.36,1) !important;
  -webkit-tap-highlight-color:transparent;
}
.btn{
  padding:8px 15px;
  font-size:13px !important;
  border:1px solid transparent !important;
}
.layui-btn{
  padding:0 16px; height:34px; line-height:32px;
  font-size:13px !important;
  border:1px solid transparent !important;
}

/* 尺寸只影响疏密，不改变圆角语汇 */
.btn-sm{ padding:5px 11px; font-size:12px !important; border-radius:7px !important; }
.btn-xs{ padding:2px 8px; font-size:11px !important; border-radius:6px !important; line-height:1.75; }
.layui-btn-sm{ height:30px; line-height:28px; padding:0 12px; font-size:12px !important; border-radius:7px !important; }
.layui-btn-xs{ height:24px; line-height:22px; padding:0 9px; font-size:11px !important; border-radius:6px !important; }

/* ── 2. 主操作：唯一的实心强调 ─────────────────────────────────────── */
.btn-primary,
.layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-danger),
.el-button--primary{
  background:var(--ember) !important;
  color:var(--on-ember) !important;
  border-color:var(--ember) !important;
  box-shadow:inset 0 1px 0 var(--btn-hair), 0 1px 2px rgba(0,0,0,.22) !important;
}
.btn-primary:hover,
.layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-danger):hover,
.el-button--primary:hover{
  background:var(--ember-2) !important;
  border-color:var(--ember-2) !important;
  box-shadow:inset 0 1px 0 var(--btn-hair), 0 5px 14px -7px var(--ember) !important;
  transform:translateY(-1px);
}

/* ── 3. 语义四色：软底分类，悬停才实心 ─────────────────────────────── */
/* 默认（含 .btn-sm/.btn-xs）是软底 chip：降低视觉重量，表格里不再一片色块 */
.btn-success{ --fd-c:var(--ok);   --fd-soft:var(--ok-soft);   --fd-line:var(--ok-line);   --fd-fg:var(--ok-fg);   --fd-spin:var(--ok); }
.btn-danger { --fd-c:var(--bad);  --fd-soft:var(--bad-soft);  --fd-line:var(--bad-line);  --fd-fg:var(--bad-fg);  --fd-spin:var(--bad); }
.btn-warning{ --fd-c:var(--warn); --fd-soft:var(--warn-soft); --fd-line:var(--warn-line); --fd-fg:var(--warn-fg); --fd-spin:var(--warn); }
.btn-info   { --fd-c:var(--info2);--fd-soft:var(--info-soft); --fd-line:var(--info-line); --fd-fg:var(--info-fg); --fd-spin:var(--info2); }

.btn-success, .btn-danger, .btn-warning, .btn-info,
.layui-btn-danger,
.el-button--success, .el-button--danger, .el-button--warning, .el-button--info{
  background:var(--fd-soft) !important;
  color:var(--fd-fg) !important;
  border-color:var(--fd-line) !important;
  box-shadow:none !important;
}
.layui-btn-danger{
  --fd-c:#F0553F; --fd-soft:rgba(240,85,63,.13); --fd-line:rgba(240,85,63,.32); --fd-fg:#FF8A76; --fd-spin:#F0553F;
}
.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover,
.layui-btn-danger:hover,
.el-button--success:hover, .el-button--danger:hover, .el-button--warning:hover, .el-button--info:hover{
  background:var(--fd-c) !important;
  border-color:var(--fd-c) !important;
  color:#FFFFFF !important;
  box-shadow:0 5px 14px -7px var(--fd-c) !important;
  transform:translateY(-1px);
}

/* ── 4. 实心只留给两类：危险动作、表单主提交 ──────────────────────── */
/* 四色若全部实心，一屏会并排出现四五个高饱和色块，视线没有落点。
   success / warning / info 保持软底，hover 才实心；danger 留实心，
   因为删除、退款这类动作需要一点警示重量。 */
.btn-danger:not(.btn-xs):not(.btn-sm),
button[type="submit"].btn-success:not(.btn-xs),
input[type="submit"].btn-success:not(.btn-xs){
  background:var(--fd-c) !important;
  border-color:var(--fd-c) !important;
  color:#FFFFFF !important;
  box-shadow:inset 0 1px 0 var(--btn-hair), 0 1px 2px rgba(0,0,0,.18) !important;
}
.btn-danger:not(.btn-xs):not(.btn-sm):hover,
button[type="submit"].btn-success:not(.btn-xs):hover,
input[type="submit"].btn-success:not(.btn-xs):hover{
  filter:brightness(1.08) !important;
  box-shadow:inset 0 1px 0 var(--btn-hair), 0 5px 14px -7px var(--fd-c) !important;
}
/* 非 xs/sm 的软底按钮把边画实一点，避免在大面积留白里"飘" */
.btn-success:not(.btn-xs):not(.btn-sm),
.btn-warning:not(.btn-xs):not(.btn-sm),
.btn-info:not(.btn-xs):not(.btn-sm){
  border-color:var(--fd-line) !important;
}

/* ── 5. 次要按钮：纸灰幽灵 ─────────────────────────────────────────── */
.btn-default, .btn-secondary, .btn-light,
.layui-btn-primary, .layui-btn-normal,
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger){
  background:var(--btn-ghost-bg) !important;
  color:var(--txt-2) !important;
  border-color:var(--line-2) !important;
  box-shadow:none !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover,
.layui-btn-primary:hover, .layui-btn-normal:hover{
  background:var(--btn-ghost-bg-h) !important;
  color:var(--txt) !important;
  border-color:var(--line-3) !important;
}
.btn-light{ color:var(--txt) !important; }

/* 描边按钮：只有线，没有底 */
.btn-outline-primary, .btn-outline-secondary{
  background:transparent !important;
  border-color:var(--ember-line) !important;
  color:var(--ember-2) !important;
  box-shadow:none !important;
}
.btn-outline-primary:hover{
  background:var(--ember-dim) !important;
  color:var(--ember) !important;
}

/* 纯文字按钮 */
.btn-link, .btn.btn-link{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--ember-2) !important;
  box-shadow:none !important;
  padding-left:4px; padding-right:4px;
}
.btn-link:hover{ color:var(--ember) !important; text-decoration:none; }

/* ── 6. span.btn：模板里大量「状态标签」被写成了按钮 ────────────────── */
/* 这些不是可点的动作，是分类。去掉边框与抬升，只留一层极淡的底。 */
span.btn{
  cursor:default;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  padding:1px 7px !important;
  font-size:11px !important;
  font-weight:600 !important;
  border-radius:5px !important;
  letter-spacing:.02em;
}
span.btn-success{ background:var(--ok-soft) !important; color:var(--ok-fg) !important; }
span.btn-danger { background:var(--bad-soft) !important; color:var(--bad-fg) !important; }
span.btn-warning{ background:var(--warn-soft) !important; color:var(--warn-fg) !important; }
span.btn-info   { background:var(--info-soft) !important; color:var(--info-fg) !important; }
span.btn-default, span.btn-secondary{ background:var(--veil-4) !important; color:var(--txt-2) !important; }
span.btn:hover{ transform:none !important; }
/* 少数标签真的挂了 onclick，给回一点可点的手感 */
span.btn[onclick]{ cursor:pointer; }
span.btn[onclick]:hover{ filter:brightness(1.18); }

/* ── 7. 状态：悬停后的按压、禁用、键盘焦点 ─────────────────────────── */
.btn:active, .layui-btn:active, .el-button:active{
  transform:translateY(1px) !important;
  box-shadow:inset 0 2px 5px var(--btn-press) !important;
  transition-duration:.06s !important;
}
/* 禁用态不靠整体透明度：整块变淡在白底上会直接"消失"。
   改成换底色 + 灰字，深浅两套主题都能看出这里有一颗按不动的按钮。 */
.btn.disabled, .btn:disabled, .btn[disabled],
.layui-btn-disabled, .el-button.is-disabled{
  opacity:1 !important;
  background:var(--ink-700) !important;
  border-color:var(--line-2) !important;
  color:var(--txt-3) !important;
  box-shadow:none !important;
  filter:grayscale(.25) !important;
  transform:none !important;
  cursor:not-allowed !important;
}
.btn:focus-visible, .layui-btn:focus-visible, .el-button:focus-visible{
  outline:2px solid var(--ember-line) !important;
  outline-offset:2px;
}
/* 老浏览器没有 :focus-visible 时退回一层光晕 */
.btn:focus:not(:focus-visible){ outline:0 !important; }

/* ── 8. 按钮内的图标与文字间距 ─────────────────────────────────────── */
.btn > i, .btn > .mdi, .layui-btn > i, .el-button > i{
  margin-right:5px;
  font-size:1.06em;
  vertical-align:-1px;
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.btn > i:last-child, .btn > .mdi:last-child{ margin-right:0; }
.btn:hover > i:first-child{ transform:translateX(-1px); }

/* 按钮组内不重复圆角 */
.btn-group > .btn:not(:first-child){ border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; }
.btn-group > .btn:not(:last-child){ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }

/* ── 9. 提交中：文字收起，中间一个弧 ───────────────────────────────── */
.btn.fdu-busy, .layui-btn.fdu-busy, .el-button.is-loading{
  pointer-events:none !important;
  color:transparent !important;
  text-shadow:none !important;
}
.btn.fdu-busy::after, .layui-btn.fdu-busy::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border:1.5px solid rgba(127,127,127,.42);
  border-top-color:var(--fd-spin, var(--ember));
  border-radius:50%;
  animation:fduSpin .78s cubic-bezier(.5,.15,.5,.85) infinite;
}
/* 实心按钮上的环：轨道提到白色系，否则橘底上的灰圈会糊成一片 */
.btn-primary.fdu-busy::after, .layui-btn.fdu-busy::after{
  border-color:rgba(255,255,255,.34);
  border-top-color:#FFFFFF;
}
.btn-success.fdu-busy::after{ border-top-color:var(--ok-fg); }
.btn-danger.fdu-busy::after{ border-top-color:var(--bad-fg); }
.btn-default.fdu-busy::after{ border-top-color:var(--txt-2); }

/* ── 9.5 layer 弹窗按钮：颜色沿用主题，只统一几何与手感 ─────────────── */
.layui-layer-btn{
  padding:4px 14px 14px !important;
  border-top:1px solid var(--line) !important;
  margin-top:4px;
}
.layui-layer-btn a{
  height:30px !important;
  line-height:28px !important;
  padding:0 15px !important;
  margin:8px 0 0 8px !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  transition:background-color .16s ease, border-color .16s ease,
             color .16s ease, transform .16s cubic-bezier(.22,1,.36,1) !important;
}
.layui-layer-btn a:hover{ opacity:1 !important; border-color:var(--line-3) !important; }
.layui-layer-btn a:active{ transform:translateY(1px); opacity:1 !important; }
.layui-layer-btn .layui-layer-btn0{
  box-shadow:inset 0 1px 0 var(--btn-hair) !important;
}
.layui-layer-btn .layui-layer-btn0:hover{
  background:var(--ember-2) !important;
  border-color:var(--ember-2) !important;
}

/* ── 10. 加载：遮罩环（LightYear 的 ajax 遮罩） ─────────────────────── */
/* 不用 backdrop-filter：它会为内部的 position:fixed 子元素新建包含块，
   把原本居中的 spinner 拽到遮罩的左上角。改用纯色遮罩，行为可预期。 */
/* 用 vw/vh 而不是 inset+auto：原样式里的 height:100% 会去量 body，
   一旦 body 没撑满视口，遮罩就只盖住上面一截，下面的内容照样能点。 */
#lyear-loading{
  position:fixed !important;
  left:0 !important; top:0 !important;
  width:100vw !important; height:100vh !important;
  margin:0 !important; padding:0 !important;
  background:var(--load-veil) !important;
}
#lyear-loading .spinner-border{
  width:30px !important; height:30px !important;
  /* 原样式只把左上角放在 50%/50%，没有回退半个身位，环其实一直偏右下 */
  margin:-15px 0 0 -15px !important;
  border:2px solid var(--line-3) !important;
  border-top-color:var(--ember) !important;
  border-right-color:var(--line-3) !important;
  animation:fduSpin .82s cubic-bezier(.5,.15,.5,.85) infinite !important;
  vertical-align:middle;
}
#lyear-loading .spinner-border::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:4px; height:4px; margin:-2px 0 0 -2px;
  border-radius:50%; background:var(--ember);
  opacity:.55;
  animation:fduPulse 1.1s ease-in-out infinite;
}
/* 环下方一句极小的说明，告诉用户"还在跑"而不是"卡住了" */
#lyear-loading::after{
  content:"加载中";
  position:fixed; left:50%; top:calc(50% + 26px); transform:translateX(-50%);
  font-family:var(--sans); font-size:11px; letter-spacing:.18em;
  color:var(--txt-2); white-space:nowrap;
}

/* ── 11. 加载：layer.load 的小胶囊 ─────────────────────────────────── */
.layui-layer-loading,
.layui-layer-loading.layui-layer{
  background:var(--card-veil) !important;
  border:1px solid var(--line-2) !important;
  border-radius:16px !important;
  box-shadow:0 16px 38px -20px rgba(0,0,0,.8), inset 0 1px 0 var(--btn-hair) !important;
  padding:0 !important;
  width:54px !important; height:54px !important;
  overflow:hidden;
}
.layui-layer-loading .layui-layer-content{
  background:none !important;
  width:54px !important; height:54px !important;
  min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important;
  display:-webkit-box; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  overflow:visible !important;
}
/* layer.load 每一档 icon 都是不同的 gif（60×24 三点 / 37px / 32px），
   这里把 gif 全部收起，统一在 content 上画一个环 —— 全站只剩一种等待形态。 */
.layui-layer-loading .layui-layer-loading0,
.layui-layer-loading .layui-layer-loading1,
.layui-layer-loading .layui-layer-loading2{
  display:none !important;
}
.layui-layer-loading .layui-layer-content::before{
  content:"";
  display:block;
  width:22px; height:22px;
  border:2px solid var(--line-2);
  border-top-color:var(--ember);
  border-radius:50%;
  animation:fduSpin .78s cubic-bezier(.5,.15,.5,.85) infinite;
}

/* ── 12. 加载：顶部细条（换页 / ajax） ─────────────────────────────── */
.fdu-rail{
  position:fixed; left:0; top:0; width:100%; height:2px;
  z-index:99995; pointer-events:none;
  opacity:0; transition:opacity .22s ease;
  background:transparent;
}
.fdu-rail.on{ opacity:1; }
.fdu-rail > i{
  position:relative;
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--ember-dim), var(--ember) 45%, var(--ember-2));
  box-shadow:0 0 8px var(--ember);
  border-radius:0 2px 2px 0;
  transition:width .2s ease-out;
}
/* 尾端的那点辉光，让进度条不像一条死线 */
.fdu-rail > i::after{
  content:""; position:absolute; right:0; top:-2px;
  width:26px; height:6px; border-radius:3px;
  background:radial-gradient(ellipse at right, var(--ember), transparent 70%);
  opacity:.7;
}

/* ── 13. 加载：表格与 iframe 的占位 ────────────────────────────────── */
.fdu-ready .fixed-table-loading{
  background:transparent !important;
  color:var(--txt-3) !important;
  font-size:12px !important;
  letter-spacing:.06em;
}
.fdu-ready .fixed-table-loading::before{
  content:"";
  display:block; width:18px; height:18px; margin:0 auto 10px;
  border:2px solid var(--line-2);
  border-top-color:var(--ember);
  border-radius:50%;
  animation:fduSpin .8s cubic-bezier(.5,.15,.5,.85) infinite;
}
.fdu-ready #iframe-content iframe{ transition:opacity .26s ease; }

/* ── 14. 关键帧 ───────────────────────────────────────────────────── */
@keyframes fduSpin{ to{ transform:rotate(360deg); } }
@keyframes fduPulse{ 0%,100%{ opacity:.25; transform:scale(.85); } 50%{ opacity:.75; transform:scale(1.15); } }

/* ── 15. 减少动态效果 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .btn, .layui-btn, .el-button{ transition:none !important; }
  .btn:hover, .layui-btn:hover, .el-button:hover{ transform:none !important; }
  #lyear-loading .spinner-border,
  .layui-layer-loading .layui-layer-loading0,
  .layui-layer-loading .layui-layer-loading1,
  .layui-layer-loading .layui-layer-loading2,
  .btn.fdu-busy::after,
  .layui-btn.fdu-busy::after{
    animation-duration:1.6s !important;
  }
  .fdu-rail > i{ transition:width .1s linear; }
  #lyear-loading .spinner-border::after{ animation:none; }
}