/* 教职工工资条发放系统 · 共享样式
   主色沿用钉钉蓝 #1677FF，学生/教师端与管理端视觉一致 */
:root{
  --brand:#1677FF;
  --brand-dark:#0E5FD8;
  --brand-soft:#EAF2FF;
  --brand-line:#C7DCFF;
  --ink:#1A1D21;
  --ink-2:#4A5058;
  --ink-3:#8A9199;
  --line:#E5E8ED;
  --bg:#F5F7FA;
  --panel:#FFFFFF;
  --ok:#12B76A;
  --ok-bg:#E9F9F0;
  --warn:#F79009;
  --warn-bg:#FFF6E8;
  --danger:#F04438;
  --danger-bg:#FEF2F1;
  --purple:#7A5AF8;
  --purple-bg:#F1EEFF;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 8px 28px rgba(16,24,40,.12);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none;}
button{font-family:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#D5DAE2;border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------------- 通用控件 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font-size:13px;cursor:pointer;white-space:nowrap;
  transition:.15s;
}
.btn:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft);}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500;}
.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;}
.btn.danger{color:var(--danger);border-color:#FBD5D1;}
.btn.danger:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger);}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2);}
.btn.ghost:hover{background:#EEF1F5;}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:7px;}
.btn.lg{height:40px;padding:0 20px;font-size:14px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.block{width:100%;}

.input,.select,textarea.input{
  height:34px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-size:13px;color:var(--ink);outline:none;transition:.15s;width:100%;
  font-family:inherit;
}
textarea.input{height:auto;padding:9px 11px;line-height:1.6;resize:vertical;}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,119,255,.12);}
.input::placeholder{color:#A8B0BA;}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5L6 8.5L10 4.5' stroke='%238A9199' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
.label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px;font-weight:500;}
.field{margin-bottom:14px;}
.row{display:flex;gap:12px;flex-wrap:wrap;}
.row>*{flex:1;min-width:150px;}
.hint{font-size:12px;color:var(--ink-3);margin-top:5px;}

.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;
  font-size:12px;background:#EEF1F5;color:var(--ink-2);white-space:nowrap;}
.tag.blue{background:var(--brand-soft);color:var(--brand-dark);}
.tag.green{background:var(--ok-bg);color:#0B7A46;}
.tag.orange{background:var(--warn-bg);color:#B45309;}
.tag.red{background:var(--danger-bg);color:#B42318;}
.tag.purple{background:var(--purple-bg);color:#5B3FD1;}
.tag.gray{background:#EEF1F5;color:var(--ink-3);}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;}
.card-h h3{margin:0;font-size:14.5px;font-weight:600;}
.card-b{padding:18px;}

table.tbl{width:100%;border-collapse:collapse;font-size:13px;}
table.tbl th{background:#F7F9FC;color:var(--ink-2);font-weight:600;text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.5px;}
table.tbl td{padding:10px 12px;border-bottom:1px solid #F0F2F6;color:var(--ink-2);vertical-align:middle;}
table.tbl tbody tr:hover{background:#FAFBFD;}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;}
table.tbl td b{color:var(--ink);}

.empty{padding:48px 20px;text-align:center;color:var(--ink-3);font-size:13px;}
.empty .ico{font-size:30px;opacity:.35;display:block;margin-bottom:10px;}
.loading{padding:36px;text-align:center;color:var(--ink-3);font-size:13px;}

/* ---------------- 布局 ---------------- */
.layout{display:flex;min-height:100vh;}
.sidebar{width:216px;background:#0E1B2E;color:#C6D0DE;flex-shrink:0;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;}
.sidebar .brand{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar .brand .t{color:#fff;font-size:14.5px;font-weight:600;line-height:1.35;}
.sidebar .brand .s{font-size:11.5px;color:#7E8DA4;margin-top:4px;}
.nav{padding:10px 10px;flex:1;overflow:auto;}
.nav .grp{font-size:11px;color:#5F6E85;padding:12px 10px 6px;letter-spacing:.06em;}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;color:#C6D0DE;
  font-size:13px;cursor:pointer;margin-bottom:2px;transition:.15s;}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav a.on{background:var(--brand);color:#fff;font-weight:500;}
.nav a .ico{width:16px;text-align:center;font-size:14px;}
.sidebar .foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#7E8DA4;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 24px;gap:16px;position:sticky;top:0;z-index:20;}
.topbar .page-title{font-size:16px;font-weight:600;}
.topbar .grow{flex:1;}
.topbar .who{font-size:12.5px;color:var(--ink-2);text-align:right;line-height:1.35;}
.topbar .who b{color:var(--ink);font-weight:600;}
.content{padding:22px 24px 60px;flex:1;}

.page{max-width:1220px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.page-head h2{margin:0;font-size:18px;font-weight:600;}
.page-head .desc{font-size:12.5px;color:var(--ink-3);margin-top:4px;}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.kpi .k{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;}
.kpi .v{font-size:25px;font-weight:600;margin:8px 0 2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi .v small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px;}
.kpi .d{font-size:12px;color:var(--ink-3);}
.kpi.accent{background:linear-gradient(135deg,#1677FF,#0E5FD8);border-color:transparent;color:#fff;}
.kpi.accent .k,.kpi.accent .d{color:rgba(255,255,255,.8);}
.kpi.accent .v{color:#fff;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:1080px){.grid2,.grid3{grid-template-columns:1fr;}}

/* 进度条 */
.bar{height:8px;border-radius:5px;background:#EEF1F5;overflow:hidden;display:flex;}
.bar i{display:block;height:100%;}
.bar .ok{background:var(--ok);}
.bar .brand{background:var(--brand);}
.bar .read{background:#69B1FF;}
.progress-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-2);}
.progress-legend span{display:flex;align-items:center;gap:6px;}
.dot{width:9px;height:9px;border-radius:3px;display:inline-block;}

/* 迷你趋势图 */
.chart{width:100%;height:210px;display:block;}
.chart-legend{display:flex;gap:18px;font-size:12px;color:var(--ink-2);margin-top:8px;flex-wrap:wrap;}

/* 步骤条 */
.steps{display:flex;gap:0;margin:0 0 20px;}
.steps .s{flex:1;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);}
.steps .s .n{width:24px;height:24px;border-radius:50%;background:#EEF1F5;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;}
.steps .s.on .n{background:var(--brand);color:#fff;}
.steps .s.on{color:var(--ink);font-weight:500;}
.steps .s.done .n{background:var(--ok);color:#fff;}
.steps .line{flex:0 0 26px;height:1px;background:var(--line);margin:0 10px;}

/* 上传区 */
.drop{border:1.5px dashed var(--brand-line);border-radius:var(--radius);background:#FAFCFF;
  padding:30px 20px;text-align:center;cursor:pointer;transition:.15s;}
.drop:hover,.drop.over{background:var(--brand-soft);border-color:var(--brand);}
.drop .ico{font-size:30px;color:var(--brand);opacity:.8;}
.drop .t{font-size:14px;font-weight:500;margin:8px 0 4px;}
.drop .s{font-size:12.5px;color:var(--ink-3);}

/* 抽屉 */
.drawer-mask{position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:60;opacity:0;
  pointer-events:none;transition:.2s;}
.drawer-mask.on{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,94vw);background:#fff;z-index:61;
  transform:translateX(102%);transition:transform .24s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);}
.drawer.on{transform:none;}
.drawer .dh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:12px;}
.drawer .dh h3{margin:0;font-size:15px;}
.drawer .db{padding:20px;overflow:auto;flex:1;}
.drawer .df{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;
  background:#FBFCFE;}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:70;display:flex;
  align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:.18s;}
.modal-mask.on{opacity:1;pointer-events:auto;}
.modal{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);width:min(520px,94vw);
  max-height:88vh;display:flex;flex-direction:column;transform:scale(.97);transition:.18s;}
.modal-mask.on .modal{transform:none;}
.modal .mh{padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;}
.modal .mb{padding:20px;overflow:auto;}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;}
/* 宽弹窗：自检结果、「怎么处理」这类长文本一列放不下，520 会把指引截断 */
.modal.wide{width:min(900px,95vw);}

/* 提示 */
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;
  flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{background:#1A1D21;color:#fff;padding:10px 18px;border-radius:9px;font-size:13px;
  box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-8px);transition:.2s;max-width:80vw;}
.toast.on{opacity:1;transform:none;}
.toast.ok{background:#0B7A46;}
.toast.err{background:#B42318;}
.toast.warn{background:#B45309;}

/* 登录页 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#0B2A5B 0%,#0E5FD8 52%,#3E9BFF 100%);padding:24px;}
.login-card{width:min(460px,100%);background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);
  padding:30px 30px 24px;}
.login-card .logo{width:46px;height:46px;border-radius:12px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;}
.login-card h1{font-size:19px;margin:0 0 6px;font-weight:600;}
.login-card .sub{font-size:13px;color:var(--ink-3);margin-bottom:20px;}
.login-card .demo-tip{background:var(--brand-soft);border-radius:8px;padding:10px 12px;font-size:12px;
  color:var(--brand-dark);margin-top:16px;line-height:1.65;}
.or-split{display:flex;align-items:center;gap:10px;margin:16px 0 14px;color:var(--ink-3);font-size:12px;}
.or-split::before,.or-split::after{content:'';height:1px;background:var(--line);flex:1;}
.or-split span{white-space:nowrap;}

/* 本机快捷登录（受信任设备）
   ★ 与二维码面板是「二选一优先」关系：有快捷登录 → 二维码折叠（点标题展开）；
     没有 → 二维码直接露出。两者都来自同一个身份来源（钉钉实名授权）。 */
.quick-login{display:grid;grid-template-columns:56px 1fr auto;
  grid-template-areas:"ava info btn" "foot foot foot" "note note note";
  gap:10px 12px;align-items:center;border:1px solid #CFE0FA;border-radius:12px;
  background:linear-gradient(135deg,#F5F9FF,#EAF3FF);padding:16px;margin-bottom:14px;}
.ql-ava{grid-area:ava;width:56px;height:56px;border-radius:50%;position:relative;overflow:hidden;
  box-shadow:0 2px 10px rgba(11,42,91,.18);background:#0B2A5B;}
.ql-ava .ava-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;font-weight:600;letter-spacing:1px;}
.ql-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ql-info{grid-area:info;min-width:0;}
.ql-hi{line-height:1.3;}
.ql-hi .ql-hello{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.5px;}
.ql-hi b{display:block;font-size:18px;color:var(--ink);font-weight:600;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ql-sub{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.55;}
.ql-bit{white-space:nowrap;}                 /* 「上次登录 2026-10-17 16:17」不许从中间断开 */
.ql-dot{font-style:normal;color:#C3CDDB;margin:0 5px;}
.ql-btn{grid-area:btn;min-width:108px;height:40px;}
.ql-foot{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;color:var(--ink-3);border-top:1px dashed #D3E2F8;padding-top:9px;}
.ql-auto{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;margin:0;}
.ql-auto input{margin:0;}
.ql-switch{color:var(--brand);cursor:pointer;text-decoration:none;white-space:nowrap;}
.ql-switch:hover{text-decoration:underline;}
.ql-note{grid-area:note;font-size:11px;color:var(--ink-3);line-height:1.6;}
.ql-note b{color:var(--brand-dark);font-weight:600;}

/* 扫码区折叠：有快捷登录时收起，点标题展开（展开后 JS 会重绘二维码，避免按折叠宽度出码） */
.alt-login{border-radius:12px;}
.alt-login>summary{font-size:12px;color:var(--ink-3);cursor:pointer;list-style:none;
  user-select:none;padding:2px 0 8px;display:flex;align-items:center;gap:5px;}
.alt-login>summary::-webkit-details-marker{display:none;}
.alt-login>summary::before{content:'▸';font-size:11px;}
.alt-login[open]>summary::before{content:'▾';}

@media(max-width:520px){
  .quick-login{grid-template-columns:48px 1fr;
    grid-template-areas:"ava info" "btn btn" "foot foot" "note note";}
  .ql-ava{width:48px;height:48px;}
  .ql-btn{width:100%;}
}

/* 扫码登录面板
   ★ 二维码必须「一块不少」地露出来：原来 .qr-stage 固定 180px 且 overflow:hidden，
   而钉钉组件按 260px 渲染 iframe —— 底部连同左下定位角被裁掉，
   手机对着一半的码扫描，怎么扫都是「无法识别」。这里改成
   「容器让位给二维码」（300px、overflow:visible），上下排布，窄屏等比缩放。 */
.qr-panel{display:flex;flex-direction:column;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:14px;background:#FAFBFC;}
.qr-stage{width:300px;max-width:100%;height:300px;border-radius:10px;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  overflow:visible;position:relative;}
.qr-stage .qr-frame{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;}
/* iframe 的尺寸由 JS 按容器实测值传进来（DTFrameLogin 的 width/height），
   这里不再用 CSS 强行拉扯，避免「容器 180 / 内容 260」这种裁切。 */
.qr-stage iframe{border:0;display:block;background:#fff;}
/* 服务端自绘二维码：按 PNG 原始像素显示（约 260–300px），不做缩放重采样最清晰；
   容器小于图片时（窄屏）等比缩小。
   注意不要再加 image-rendering:pixelated —— 缩放时会把模块糊成锯齿，手机直接扫不出。 */
.qr-img{width:auto;height:auto;max-width:100%;max-height:100%;display:block;background:#fff;}

/* ---------------- 登录确认（真机确认：手机点「允许」才进，2026-10-22） ----------------
   扫码成功后二维码区换成这块：告诉人「去手机上看」，并显示剩余时间。
   为什么不用 toast：这要等 2 分钟，toast 两秒就没了，用户看不到该干什么。 */
.qc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;padding:16px 12px;text-align:center;background:#F7FAFF;border-radius:9px;}
.qc-t{font-size:14.5px;font-weight:600;color:var(--ink);}
.qc-d{font-size:12.5px;color:var(--ink-2);line-height:1.75;}
.qc-time{font-size:12.5px;color:var(--ink-3);}
.qc-time b{color:var(--brand-dark);font-variant-numeric:tabular-nums;font-size:16px;}
.qc-note{font-size:11.5px;color:var(--ink-3);line-height:1.7;}
.qc-fail{background:var(--danger-bg);}
.qc-fail .qc-t{color:var(--danger);}
/* 内嵌组件加载不到时的替代入口：整个二维码区域变成一个可点的「打开钉钉登录」 */
.qr-jump{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;height:100%;text-decoration:none;color:var(--brand);background:#F4F8FF;
  border-radius:9px;transition:background .15s;}
.qr-jump:hover{background:#E8F2FF;}
.qr-jump-ico{font-size:30px;line-height:1;}
.qr-jump-t{font-size:13px;font-weight:600;}
.qr-jump-d{font-size:11px;color:var(--ink-3);}
.qf-qr{display:flex;gap:10px;align-items:center;margin-top:10px;}
.qf-qr img{width:92px;height:92px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:3px;}
.qf-qr div{font-size:12px;line-height:1.6;}
.qf-qr span{color:var(--ink-3);}
.qr-local{display:block;margin-top:6px;color:var(--ink-3);font-size:11px;line-height:1.6;}

/* 登录失败诊断卡：常驻在登录卡片里，直到登录成功或用户重扫。
   红框 + 白底，不像 toast 那样会遮挡表单，也不会 2.6 秒就消失。 */
.login-fail{text-align:left;border:1px solid #F0C6C0;background:#FFF7F6;border-radius:12px;
  padding:14px 16px;margin-bottom:14px;}
.lf-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.lf-ico{flex:none;width:20px;height:20px;border-radius:50%;background:#D92D20;color:#fff;
  font-size:13px;font-weight:700;line-height:20px;text-align:center;}
.lf-title{font-size:14px;font-weight:600;color:#B42318;line-height:1.4;}
.lf-msg{font-size:12.5px;color:#4A2B27;line-height:1.75;white-space:pre-line;
  word-break:break-word;}
.lf-steps{margin:9px 0 0;padding-left:20px;font-size:12.5px;color:#4A2B27;line-height:1.85;}
.lf-steps li{margin-bottom:3px;}
.lf-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.lf-sub{margin-top:8px;font-size:12px;color:var(--ink-3);line-height:1.6;}
.lf-raw{margin-top:10px;font-size:11.5px;color:var(--ink-3);}
.lf-raw summary{cursor:pointer;color:var(--ink-2);}
.lf-raw .mono{margin-top:6px;padding:8px;background:#fff;border:1px solid var(--line);
  border-radius:6px;word-break:break-all;line-height:1.6;}
@media(max-width:520px){.login-fail{padding:12px;}.lf-acts .btn{flex:1 1 auto;}}
.qr-loading{font-size:12px;color:var(--ink-3);text-align:center;padding:0 8px;line-height:1.7;}
/* 「当前地址不能扫码」：与其摆一张扫了也进不去的码，不如把原因说清、把密码登录推到面前 */
.qr-block{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:0 18px;text-align:center;}
.qb-ico{width:34px;height:34px;border-radius:50%;background:var(--warn-bg);color:#B54708;
  font-weight:700;font-size:18px;line-height:34px;text-align:center;margin-bottom:2px;}
.qb-t{font-size:13px;font-weight:600;color:var(--ink);line-height:1.5;}
.qb-d{font-size:12px;color:var(--ink-3);line-height:1.7;}
.qf-steps{margin:8px 0 0;padding-left:18px;font-size:12px;color:#0B2A5B;line-height:1.85;}
.qf-steps li{margin-bottom:2px;}
.qf-mono{margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--ink-3);word-break:break-all;line-height:1.6;}
.qr-demo{text-align:center;padding:0 10px;color:var(--ink-3);font-size:12px;line-height:1.7;}
.qr-demo-ico{font-size:34px;color:#C7D2E0;line-height:1.2;margin-bottom:6px;}
.qr-demo-t{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:4px;}
.qr-side{width:100%;min-width:0;}
.qr-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px;text-align:center;}
.qr-steps{margin:0;padding-left:18px;font-size:12px;color:var(--ink-2);line-height:1.9;
  display:inline-block;text-align:left;}
.qr-steps-wrap{text-align:center;}
.qr-status{font-size:12px;color:#B45309;margin-top:8px;line-height:1.6;min-height:0;}
.qr-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.qr-fallback{margin-top:12px;border:1px dashed #C7DDFF;background:#F4F8FF;border-radius:9px;
  padding:11px 13px;font-size:12px;color:#0B2A5B;line-height:1.75;}
.qr-fallback .qf-actions{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap;}

/* 发送结果 / 未送达名单：按原因分组，每组一句「该怎么修」 */
.grp-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.grp{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:#FAFBFC;}
.grp b{font-size:13px;color:var(--ink);}
.grp .n{float:right;font-size:12px;color:var(--danger);font-weight:600;}
.grp .adv{font-size:12px;color:var(--ink-3);line-height:1.65;margin-top:4px;}
.kpi.danger .v{color:var(--danger);}
.pwd-box{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;}
.pwd-box>summary{font-size:12px;color:var(--ink-3);cursor:pointer;list-style:none;user-select:none;}
.pwd-box>summary::-webkit-details-marker{display:none;}
.pwd-box>summary::before{content:'▸ ';color:var(--ink-3);}
.pwd-box[open]>summary::before{content:'▾ ';}
.pwd-box .pwd-body{padding-top:12px;}

/* ------------------------------------------------ 回调地址自检（redirect_uri 报错） */
.qr-diag{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:#fff;}
.qr-diag>summary{font-size:12px;color:var(--ink-3);cursor:pointer;list-style:none;user-select:none;
  padding:10px 12px;line-height:1.5;display:flex;align-items:center;gap:6px;}
.qr-diag>summary::-webkit-details-marker{display:none;}
.qr-diag>summary::before{content:'▸';color:var(--ink-3);flex:none;}
.qr-diag[open]>summary::before{content:'▾';}
.qr-diag[open]>summary{border-bottom:1px solid var(--line);}
.qr-diag-body{padding:12px;font-size:12px;color:var(--ink-2);line-height:1.7;}
.qd-badge{font-size:11px;padding:1px 7px;border-radius:999px;font-weight:600;white-space:nowrap;}
.qd-badge.ok{background:#E8F7EE;color:#0E7B3D;}
.qd-badge.bad{background:#FDECEA;color:#B42318;}
.qd-badge.warn{background:#FFF6E5;color:#946200;}
.qd-row{border-radius:8px;padding:9px 11px;margin-bottom:10px;font-size:12px;line-height:1.65;}
.qd-row b{display:block;margin-bottom:3px;font-size:12.5px;}
.qd-row.ok{background:#F2FBF6;border:1px solid #CDEBD8;}
.qd-row.ok b{color:#0E7B3D;}
.qd-row.bad{background:#FEF4F3;border:1px solid #F7D4D0;}
.qd-row.bad b{color:#B42318;}
.qd-row.warn{background:#FFFAF0;border:1px solid #F5E3BE;}
.qd-row.warn b{color:#946200;}
.qd-sub{font-size:11.5px;color:var(--ink-3);font-weight:600;margin:12px 0 6px;letter-spacing:.2px;}
.qd-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  word-break:break-all;line-height:1.6;}
.qd-badc{color:#B42318;}
.qd-okc{color:#0E7B3D;}
.qd-copy{display:flex;align-items:center;gap:8px;background:var(--bg-2,#F7F8FA);
  border:1px dashed #C9D2E0;border-radius:8px;padding:8px 10px;}
.qd-copy code{flex:1;min-width:0;color:var(--ink-1,#1B2433);font-weight:500;}
.qd-copy .btn{flex:none;}
/* 输入框要占满一行：登录卡片很窄，横排会把输入框压到看不出内容 */
.qd-copy.qd-stack{flex-direction:column;align-items:stretch;gap:6px;}
.qd-copy.qd-stack .input{width:100%;}
.qd-copy.qd-stack .btn{align-self:flex-end;}
.qd-tbl{margin-top:2px;font-size:11.5px;}
.qd-tbl th,.qd-tbl td{padding:6px 8px;vertical-align:top;}
.qd-tbl td:nth-child(2),.qd-tbl td:nth-child(3){max-width:150px;word-break:break-all;}
.qd-list{margin:0;padding-left:18px;line-height:1.75;}
.qd-list li{margin-bottom:3px;}
.qd-steps{margin:0;padding-left:18px;line-height:1.7;}
.qd-steps li{margin-bottom:7px;}
.qd-steps b{font-weight:600;color:var(--ink-1,#1B2433);}
.qd-more{margin-top:12px;border:1px solid var(--line);border-radius:8px;background:#FCFCFD;}
.qd-more>summary{font-size:11.5px;color:var(--ink-3);cursor:pointer;list-style:none;
  padding:8px 10px;user-select:none;}
.qd-more>summary::-webkit-details-marker{display:none;}
.qd-more>summary::before{content:'▸ ';}
.qd-more[open]>summary::before{content:'▾ ';}
.qd-more[open]>summary{border-bottom:1px solid var(--line);}
.qd-more>ol,.qd-more>.qd-row{margin:10px 12px;}
.qd-more>ol{padding-left:22px;}
.qd-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:10px;
  border-top:1px solid var(--line);}
@media(max-width:520px){
  .qr-panel{flex-direction:column;align-items:stretch;}
  /* 窄屏不留固定高度：保持正方形，JS 会按实测宽度重新渲染二维码，不会被裁 */
  .qr-stage{width:100%;min-width:0;height:auto;aspect-ratio:1/1;max-height:80vw;}
}

/* 钉钉只读字段标识 */
.dt-lock{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#1677FF;
  background:#EAF2FF;border-radius:4px;padding:1px 5px;white-space:nowrap;}
.ro-input{background:#F5F7FA;color:var(--ink-2);cursor:not-allowed;}
.nowrap{white-space:nowrap;}
.nowrap .btn{margin-right:4px;}
.req{color:var(--danger);font-weight:600;}
.dt-banner{display:flex;gap:12px;align-items:flex-start;background:#EAF2FF;border:1px solid #C7DDFF;
  border-radius:10px;padding:13px 15px;margin-bottom:16px;font-size:13px;line-height:1.7;color:#0B2A5B;}
.dt-banner .ico{font-size:17px;line-height:1.3;}
.dt-banner b{font-weight:600;}
.diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}

/* 同步范围卡片（2026-10-17）：把「只同步哪几个部门」摆在最显眼处 ——
   人数口径对不上时，第一眼看的就是这里。 */
.scope-card{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid #C7DDFF;background:#F4F8FF;border-radius:10px;padding:14px 16px;margin-bottom:16px;}
.scope-card.warn{border-color:#FFE1A8;background:#FFF9EE;}
.scope-card .sc-k{font-size:12px;color:var(--ink-3);}
.scope-card .sc-v{font-size:17px;font-weight:650;margin-top:2px;color:#0B2A5B;}
.scope-card.warn .sc-v{color:#8A5A00;}
.scope-card .sc-d{font-size:12px;color:var(--ink-2);line-height:1.65;margin-top:5px;max-width:640px;}
.scope-card .sc-side{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.scope-card .sc-num{font-size:12px;color:var(--ink-2);text-align:center;line-height:1.5;}
.scope-card .sc-num b{display:block;font-size:19px;font-weight:650;color:var(--ink);}
.scope-card .sc-num.muted b{color:#8A5A00;}
.sc-list{display:flex;flex-direction:column;gap:2px;}
.sc-row{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;cursor:pointer;}
.sc-row:hover{background:#F5F7FA;}
.sc-row .sc-name{font-size:13.5px;font-weight:550;}
.sc-row .hint{margin-left:auto;}

.diff-cell{border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:#fff;}
.diff-cell .k{font-size:12px;color:var(--ink-3);}
.diff-cell .v{font-size:21px;font-weight:600;margin-top:3px;}
.diff-cell.ok .v{color:#0B7A46;}
.diff-cell.warn .v{color:#B26A00;}
.diff-cell.err .v{color:#C4314B;}
.diff-cell.blue .v{color:var(--brand-dark);}
.chg-from{color:var(--ink-3);text-decoration:line-through;}
.chg-to{color:#0B7A46;font-weight:600;}
.chg-arrow{color:var(--ink-3);margin:0 4px;}
.steps{counter-reset:s;margin:0;padding:0;list-style:none;}
.steps li{counter-increment:s;position:relative;padding:0 0 12px 30px;font-size:13px;line-height:1.7;}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);font-size:12px;
  display:flex;align-items:center;justify-content:center;font-weight:600;}

/* 表格操作条 */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.toolbar .grow{flex:1;}
.seg{display:inline-flex;background:#EEF1F5;border-radius:8px;padding:3px;gap:2px;}
.seg button{border:none;background:transparent;padding:5px 13px;border-radius:6px;font-size:12.5px;
  color:var(--ink-2);cursor:pointer;transition:.15s;}
.seg button.on{background:#fff;color:var(--brand);font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.08);}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;}
.tabs button{border:none;background:transparent;padding:9px 16px;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600;}

.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:14px 2px 0;font-size:12.5px;
  color:var(--ink-2);}
.pager .pg{display:flex;gap:4px;}
.pager button{min-width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:7px;
  cursor:pointer;font-size:12.5px;color:var(--ink-2);}
.pager button.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.pager button:disabled{opacity:.45;cursor:not-allowed;}

ul.checks{list-style:none;padding:0;margin:0;}
ul.checks li{padding:9px 0 9px 26px;position:relative;font-size:13px;color:var(--ink-2);
  border-bottom:1px dashed #EDF0F4;}
ul.checks li:last-child{border-bottom:none;}
ul.checks li::before{content:"✓";position:absolute;left:4px;top:8px;color:var(--ok);font-size:12px;font-weight:700;}
ul.checks li.no::before{content:"!";color:var(--warn);}
ul.checks li b{color:var(--ink);}

/* 员工端 */
.emp-body{background:#EDF1F7;min-height:100vh;padding-bottom:24px;}
.emp-head{background:linear-gradient(135deg,#1677FF,#0E5FD8);color:#fff;padding:20px 18px 52px;}
.emp-head .t{font-size:17px;font-weight:600;}
.emp-head .s{font-size:12.5px;opacity:.85;margin-top:3px;}
.emp-wrap{max-width:480px;margin:0 auto;padding:0 14px;}
.emp-wrap.pull{margin-top:-40px;}
.emp-card{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(16,24,40,.09);padding:18px;
  margin-bottom:12px;}
.emp-slip{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(16,24,40,.09);overflow:hidden;
  position:relative;margin-bottom:12px;}
.emp-slip .sh{padding:16px 18px 12px;border-bottom:1px dashed var(--line);}
.emp-slip .sh .p{font-size:12.5px;color:var(--ink-3);}
.emp-slip .sh .n{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:4px;}
.emp-slip .sb{padding:8px 18px 14px;}
.emp-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;
  border-bottom:1px solid #F4F6F9;}
.emp-row:last-child{border-bottom:none;}
.emp-row .l{color:var(--ink-2);}
.emp-row .r{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500;}
.emp-row.ded .r{color:#0B7A46;}
.emp-row.sum{font-weight:600;background:#FAFBFD;margin:0 -18px;padding:11px 18px;}
.emp-sec{font-size:12px;color:var(--ink-3);padding:13px 18px 5px;}
/* 备注 / 说明：财务在工资表备注列里写的那句话，原样显示给老师看 */
.emp-note{font-size:12.5px;color:var(--ink-2);line-height:1.75;padding:2px 18px 6px;
  white-space:pre-wrap;word-break:break-word;}
.wm{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5;}
.wm span{position:absolute;font-size:11px;color:rgba(22,119,255,.085);white-space:nowrap;
  transform:rotate(-26deg);font-weight:600;letter-spacing:.03em;}
.nocopy{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.emp-sticky{position:sticky;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);
  padding:12px 16px;backdrop-filter:blur(8px);}
.emp-sticky .in{max-width:480px;margin:0 auto;display:flex;gap:10px;}

@media (max-width:860px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:80;transform:translateX(-100%);transition:.22s;}
  .sidebar.on{transform:none;}
  .content{padding:16px 14px 60px;}
  .topbar{padding:0 14px;}
  .kpis{grid-template-columns:1fr 1fr;}
}
.menu-btn{display:none;background:none;border:none;font-size:19px;cursor:pointer;color:var(--ink-2);}
@media (max-width:860px){.menu-btn{display:block;}}

/* ---------------- 环境标识（测试阶段） ---------------- */
/* 非生产环境在顶栏常驻一枚标识：防止把测试数据当成真实工资条、
   或反过来在生产环境上误操作。生产环境不显示。 */
.env-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:11px;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  background:#FFF4E5;color:#9A5B00;border:1px solid #FFD9A0;white-space:nowrap;cursor:default;}
.env-badge.test{background:#FFF4E5;color:#9A5B00;border-color:#FFD9A0;}
.env-badge.dev{background:#EEF3FF;color:#1D4ED8;border-color:#C7D7FF;}
.env-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;}
.foot .ver-line{display:flex;align-items:center;gap:6px;margin-top:4px;}
.foot .ver-line .sha{color:#5F6E85;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;}

/* ---------------- 钉钉凭证盘点（配置页） ---------------- */
/* 四个值逐个显示「已设置 / 未填」：原来只有一个笼统的「未配置」，
   管理员填完看不出到底存没存进去。 */
.cred-box{display:grid;gap:6px;margin:2px 0 10px;}
.cred-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#FBFCFE;line-height:1.5;}
.cred-row.on{background:#F4FBF6;border-color:#CDEBD8;color:#20603A;}
.cred-row .dot{width:7px;height:7px;border-radius:50%;background:#C6CFDC;flex:none;}
.cred-row.on .dot{background:#2FA36B;}
.cred-row b{color:var(--text);font-weight:600;flex:none;}
.cred-row.on b{color:#1D5C36;}
.cred-row .why{flex:1;color:var(--muted);}
.cred-row .st{flex:none;font-weight:600;font-size:12px;}
.cred-ok{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:11.5px;
  font-weight:600;color:#1F7A4D;background:#EAF7F0;border:1px solid #CBE9D8;
  padding:1px 7px;border-radius:9px;}
.cred-miss{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:11.5px;
  font-weight:600;color:#9A5B00;background:#FFF4E5;border:1px solid #FFD9A0;
  padding:1px 7px;border-radius:9px;}

/* ---------------- 离线快照提示条 ---------------- */
/* 直接打开的 demo/*.html 没有后端：配置页必须一眼看出「这里填了也不会保存」，
   否则会在快照里认真填一遍凭证、点保存、看到「已保存」，然后库里什么也没有。 */
.offline-bar{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;
  border:1px solid #C7D7FF;background:#EEF3FF;border-radius:10px;color:#1E3A8A;
  font-size:12.8px;line-height:1.75;}
.offline-bar .ico{flex:none;width:20px;height:20px;border-radius:50%;background:#1D4ED8;color:#fff;
  font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.offline-bar b{color:#12296B;}
.offline-bar .mono{font-family:ui-monospace,Menlo,monospace;background:#DDE7FF;
  padding:1px 5px;border-radius:4px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}

/* ---------------- 花名册：视图切换 + 与钉钉通讯录对账 ---------------- */
/* 为什么要有视图：status（在职/离职）与 sync_state（是否还在钉钉里）是两个维度，
   单看一个就对不上账。默认视图「在职 · 与钉钉一致」= 在职 且 不是范围外/钉钉已移除。 */
.staff-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:4px;background:#F1F4F9;
  border-radius:10px;margin-bottom:14px;}
.staff-tab{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;
  background:transparent;border-radius:8px;color:var(--ink-3);font-size:13px;cursor:pointer;
  font-family:inherit;white-space:nowrap;}
.staff-tab:hover{background:#E8EDF6;color:var(--ink);}
.staff-tab.on{background:#fff;color:var(--brand-dark);font-weight:600;box-shadow:0 1px 3px rgba(16,24,40,.10);}
.staff-tab .n{min-width:20px;padding:0 6px;height:18px;line-height:18px;text-align:center;
  border-radius:9px;background:#E4EAF3;color:var(--ink-3);font-size:11.5px;
  font-variant-numeric:tabular-nums;}
.staff-tab.on .n{background:var(--brand-soft);color:var(--brand-dark);}
.staff-tab.alert .n{background:#FFE9E4;color:#C0392B;}

.recon{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:14px 16px;margin-bottom:14px;}
.recon.ok{border-color:#BFE3C9;background:linear-gradient(180deg,#F7FCF9,#fff);}
.recon.warn{border-color:#FFE1A8;background:linear-gradient(180deg,#FFFCF3,#fff);}
.recon-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:600;}
.recon-h .sub{font-weight:400;color:var(--ink-3);font-size:12.5px;}
.recon-g{display:flex;gap:26px;flex-wrap:wrap;margin:12px 0 8px;}
.recon-g .c{min-width:96px;}
.recon-g .k{font-size:12px;color:var(--ink-3);}
.recon-g .v{font-size:21px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1.25;}
.recon-g .v small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:2px;}
.recon-g .c.diff .v{color:#1F9254;}
.recon-g .c.bad .v{color:#C0392B;}
.recon-foot{font-size:12.3px;color:var(--ink-3);line-height:1.8;}
.recon-foot b{color:var(--ink);}
.recon-foot .lnk{color:var(--brand);cursor:pointer;}
.recon-foot .lnk:hover{text-decoration:underline;}

/* ================================================================ 工资条疑问（留言单）
   一条疑问 = 一张单：左边老师说的话，右边财务说的话，中间系统留痕。
   气泡只做三档颜色（老师=白、财务=品牌浅底、系统=灰），不再自造配色。 */
.fb-stats{display:flex;gap:12px;flex-wrap:wrap;}
.fb-stat{flex:1 1 150px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.fb-stat:hover{border-color:var(--brand-line, #C7DDFF);box-shadow:0 2px 10px rgba(16,24,40,.05);}
.fb-stat .v{font-size:24px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;}
.fb-stat .v.orange{color:#B26A00;} .fb-stat .v.red{color:#C0392B;}
.fb-stat .v.green{color:#1F9254;} .fb-stat .v.gray{color:var(--ink-3);}
.fb-stat .n{font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.fb-picks{display:flex;flex-direction:column;gap:2px;max-height:42vh;overflow:auto;
  border:1px solid var(--line);border-radius:10px;padding:6px;}
.fb-pick{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:13px;line-height:1.6;}
.fb-pick:hover{background:#F5F8FD;}
.fb-pick input{margin-top:3px;}
.fb-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px;font-size:13px;}
.fb-thread{max-height:44vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:2px 2px 6px;}
.fb-msg{max-width:86%;align-self:flex-start;}
.fb-msg.me{align-self:flex-end;text-align:right;}
.fb-meta{font-size:11.5px;color:var(--ink-3);margin-bottom:4px;display:flex;gap:6px;
  align-items:center;justify-content:flex-start;}
.fb-msg.me .fb-meta{justify-content:flex-end;}
.fb-bubble{display:inline-block;text-align:left;background:#F4F6FA;border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.75;white-space:pre-wrap;
  word-break:break-word;color:var(--ink);}
.fb-msg.me .fb-bubble{background:#EAF2FF;border-color:#C7DDFF;color:#0B2A5B;}
.fb-sys{align-self:center;font-size:11.5px;color:var(--ink-3);background:#F7F9FC;
  border:1px dashed var(--line);border-radius:999px;padding:3px 12px;}
.fb-assign{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;
  padding-top:10px;border-top:1px dashed var(--line);}