/* 首页模板模块（2026-10-23）。按 ../../ui-standards.md：Radix Slate + Jade；字号 18/16/14/12；边框 0.5px；只有浮层用阴影；动画 ease-out 250ms；嵌套圆角同心。
   全部样式限定在 #tplmod-root / #tm-qv 内，类名 tm- 前缀。 */
#tplmod-root,#tm-qv{
  /* Radix Slate */
  --s1:#fcfcfd;--s2:#f9f9fb;--s3:#f0f0f3;--s4:#e8e8ec;--s6:#d9d9e0;--s7:#cdced6;--s8:#b9bbc6;--s9:#8b8d98;--s11:#60646c;--s12:#1c2024;
  /* Radix Jade */
  --j2:#f4fbf7;--j3:#e6f7ed;--j4:#d6f1e3;--j6:#acdec8;--j7:#8bceb6;--j9:#29a383;--j10:#26997b;--j11:#208368;
  --hair:.5px;--ease:250ms ease-out;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--s12);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased
}
#tplmod-root *,#tm-qv *{box-sizing:border-box}
#tplmod-root a,#tm-qv a{color:inherit;text-decoration:none}
#tplmod-root button,#tm-qv button{font:inherit;line-height:inherit;margin:0;outline:none}
#tplmod-root{display:none;background:var(--s2);padding:48px 0 64px}
#tplmod-root.tm-on{display:block}
#tplmod-root .tm-w{max-width:1200px;margin:0 auto;padding:0 20px}

/* 页签：16px，选中加粗 + 品牌绿短线 */
#tplmod-root .tm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;box-shadow:inset 0 calc(-1 * var(--hair)) 0 var(--s6)}
#tplmod-root .tm-tabs{display:flex;gap:32px}
#tplmod-root .tm-tab{position:relative;border:0;background:none;padding:0 0 12px;font-size:16px;color:var(--s11);cursor:pointer;white-space:nowrap}
#tplmod-root .tm-tab:hover{color:var(--s12)}
#tplmod-root .tm-tab.on{color:var(--s12);font-weight:600}
#tplmod-root .tm-tab.on:after{content:"";position:absolute;left:50%;bottom:0;width:20px;height:2px;margin-left:-10px;background:var(--j9)}
#tplmod-root .tm-tools{padding-bottom:10px}
#tplmod-root .tm-select{position:relative;display:inline-block}
#tplmod-root .tm-select select{appearance:none;-webkit-appearance:none;height:28px;border:var(--hair) solid var(--s7);border-radius:6px;background:var(--s1);padding:0 26px 0 10px;color:var(--s11);font-size:12px;cursor:pointer;outline:none}
#tplmod-root .tm-select:after{content:"";position:absolute;right:10px;top:10px;width:5px;height:5px;border-right:1px solid var(--s9);border-bottom:1px solid var(--s9);transform:rotate(45deg);pointer-events:none}

/* 一级：胶囊，细边框，选中实心 Jade 9 */
#tplmod-root .tm-l1{display:flex;flex-wrap:wrap;gap:8px;padding:20px 0 0}
#tplmod-root .tm-pill{border:var(--hair) solid var(--s7);background:var(--s1);border-radius:6px;padding:4px 12px;color:var(--s11);font-size:14px;cursor:pointer}
#tplmod-root .tm-pill:hover{background:var(--s3);color:var(--s12)}
#tplmod-root .tm-pill.on{background:var(--j9);border-color:var(--j9);color:#fff}
#tplmod-root .tm-pill.more{color:var(--j11);border-color:var(--j7)}
#tplmod-root .tm-pill.more:hover{background:var(--j3)}
#tplmod-root .tm-pill.more:after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 3px 6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
#tplmod-root .tm-pill.more.open:after{transform:rotate(-135deg);margin-bottom:0}

/* 二、三级：同一块面板，细边框，无阴影 */
#tplmod-root .tm-sub{margin-top:12px;background:var(--s1);border:var(--hair) solid var(--s6);border-radius:8px}
#tplmod-root .tm-l2{display:flex;gap:28px;padding:0 16px;box-shadow:inset 0 calc(-1 * var(--hair)) 0 var(--s4);overflow-x:auto}
#tplmod-root .tm-l2 button{position:relative;border:0;background:none;padding:10px 0;color:var(--s11);font-size:14px;cursor:pointer;white-space:nowrap}
#tplmod-root .tm-l2 button:hover{color:var(--s12)}
#tplmod-root .tm-l2 button.on{color:var(--j11);font-weight:600}
#tplmod-root .tm-l2 button.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--j9)}
#tplmod-root .tm-l3{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;padding:12px 16px 16px}
#tplmod-root .tm-chip{border:0;background:var(--s3);border-radius:4px;padding:5px 8px;color:var(--s11);font-size:12px;cursor:pointer;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tplmod-root .tm-chip:hover{background:var(--j3);color:var(--j11)}
#tplmod-root .tm-chip.on{background:var(--j9);color:#fff}
#tplmod-root .tm-chip.off{color:var(--s8);cursor:default;background:var(--s2)}

/* 当前位置 / 推荐依据：12px */
#tplmod-root .tm-path{display:flex;align-items:center;gap:6px;color:var(--s9);font-size:12px;margin:16px 0 0;min-height:20px}
#tplmod-root .tm-path b{color:var(--s12);font-weight:600}
#tplmod-root .tm-path .sep{color:var(--s8)}
#tplmod-root .tm-path .clr{margin-left:8px;color:var(--s9);cursor:pointer;border:0;background:none;font-size:12px;padding:0}
#tplmod-root .tm-path .clr:hover{color:var(--j11)}

/* 更多岗位面板：浮层，唯一用阴影的地方之一 */
#tplmod-root .tm-mega{display:none;margin-top:12px;background:var(--s1);border:var(--hair) solid var(--s6);border-radius:8px;box-shadow:0 8px 24px rgba(28,32,36,.08);overflow:hidden}
#tplmod-root .tm-mega.open{display:grid;grid-template-columns:160px 1fr}
#tplmod-root .tm-mega .side{background:var(--s2);padding:8px 0;max-height:460px;overflow:auto;box-shadow:inset calc(-1 * var(--hair)) 0 0 var(--s4)}
#tplmod-root .tm-mega .side button{display:block;width:100%;border:0;background:none;text-align:left;padding:8px 20px;color:var(--s11);cursor:pointer;font-size:14px}
#tplmod-root .tm-mega .side button:hover{color:var(--s12);background:var(--s3)}
#tplmod-root .tm-mega .side button.on{background:var(--s1);color:var(--j11);font-weight:600}
#tplmod-root .tm-mega .main{padding:16px 20px 20px;max-height:460px;overflow:auto}
#tplmod-root .tm-mega .find{position:relative;margin-bottom:4px}
#tplmod-root .tm-mega .find input{width:100%;height:32px;border:var(--hair) solid var(--s7);border-radius:6px;padding:0 10px 0 30px;font-size:14px;outline:none;background:var(--s1);box-shadow:none}
#tplmod-root .tm-mega .find input:focus{border-color:var(--j8,#56ba9f)}
#tplmod-root .tm-mega .find:before{content:"";position:absolute;left:11px;top:10px;width:9px;height:9px;border:1px solid var(--s9);border-radius:50%}
#tplmod-root .tm-mega h5{margin:16px 0 8px;font-size:14px;color:var(--s12);font-weight:600}
#tplmod-root .tm-mega h5 small{color:var(--s9);font-weight:400;margin-left:8px;font-size:12px}
#tplmod-root .tm-mega .g3{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
#tplmod-root .tm-mega .none{color:var(--s9);padding:24px 0}

/* 卡片：细边框，无阴影；外圆角 8 = 内圆角 2 + 内边距 6 */
#tplmod-root .tm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px 16px;margin-top:12px;padding:0;list-style:none}
#tplmod-root .tm-card{display:flex;flex-direction:column;min-width:0;background:var(--s1);border:var(--hair) solid var(--s6);border-radius:8px;padding:6px 6px 10px;transition:border-color var(--ease)}
#tplmod-root .tm-card:hover{border-color:var(--j7)}
#tplmod-root .tm-pic{aspect-ratio:3/4;border-radius:2px;overflow:hidden;position:relative;background:var(--s3);cursor:zoom-in}
#tplmod-root .tm-pic:focus-visible{outline:2px solid var(--j9);outline-offset:2px}
#tplmod-root .tm-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;border:0}
#tplmod-root .tm-pic .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:var(--s8);font-size:12px}
#tplmod-root .tm-badge{position:absolute;left:6px;top:6px;z-index:2;background:var(--j9);color:#fff;font-size:12px;line-height:18px;border-radius:2px;padding:0 6px}
/* 悬停操作栏：只做淡入 */
#tplmod-root .tm-bar{position:absolute;left:6px;right:6px;bottom:6px;z-index:1;display:flex;gap:6px;opacity:0;transition:opacity var(--ease)}
#tplmod-root .tm-card:hover .tm-bar,#tplmod-root .tm-card:focus-within .tm-bar{opacity:1}
#tplmod-root .tm-bar button{flex:1;border:0;border-radius:4px;padding:6px 0;font-size:14px;cursor:pointer}
#tplmod-root .tm-bar .pv{background:var(--s1);color:var(--s12);box-shadow:inset 0 0 0 var(--hair) var(--s7)}
#tplmod-root .tm-bar .pv:hover{background:var(--s3)}
#tplmod-root .tm-bar .use{background:var(--j9);color:#fff;font-weight:600}
#tplmod-root .tm-bar .use:hover{background:var(--j10)}
#tplmod-root .tm-name{display:block;margin:10px 4px 0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tplmod-root .tm-name:hover{color:var(--j11)}
#tplmod-root .tm-tags,#tm-qv .tm-tags{display:flex;gap:6px;margin:6px 4px 0;overflow:hidden;flex-wrap:nowrap}
#tplmod-root .tm-tags span,#tm-qv .tm-tags span{flex:0 0 auto;font-size:12px;line-height:20px;padding:0 6px;border-radius:2px;background:var(--s3);color:var(--s11)}
#tplmod-root .tm-tags span.s,#tm-qv .tm-tags span.s{background:var(--j3);color:var(--j11)}
#tplmod-root .tm-empty{grid-column:1/-1;background:var(--s1);border:var(--hair) solid var(--s6);border-radius:8px;padding:48px 20px;text-align:center;color:var(--s11)}
#tplmod-root .tm-more{display:table;margin:32px auto 0;border:var(--hair) solid var(--s7);background:var(--s1);color:var(--s11);border-radius:6px;padding:8px 24px;cursor:pointer;font-size:14px}
#tplmod-root .tm-more:hover{background:var(--s3);color:var(--s12)}
@media (hover:none){#tplmod-root .tm-bar{opacity:1;position:static;margin-top:6px}}

/* 快速预览：浮层，保留阴影；外圆角 12 */
#tm-qv{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(28,32,36,.55);padding:24px}
#tm-qv.open{display:flex}
#tm-qv .box{--h:min(860px,calc(100vh - 48px));position:relative;width:auto;max-width:100%;height:var(--h);background:var(--s1);border-radius:12px;display:grid;grid-template-columns:minmax(0,calc((var(--h) - 32px) * .7071 + 32px)) 360px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.24)}
#tm-qv .doc{background:var(--s3);padding:16px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
/* A4 比例（210:297）整页显示，高度撑满、宽度按比例 */
#tm-qv .doc .a4{height:100%;max-width:100%;aspect-ratio:210/297;background:#fff;box-shadow:0 0 0 var(--hair) var(--s6);overflow:hidden}
#tm-qv .doc img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
#tm-qv .side{padding:28px 24px 20px;display:flex;flex-direction:column;gap:16px;overflow:auto}
#tm-qv h3{margin:0;padding-right:28px;font-size:18px;line-height:1.4;font-weight:600;color:var(--s12)}
#tm-qv .by{display:flex;align-items:center;gap:8px;color:var(--s9);font-size:12px;margin-top:-8px}
#tm-qv .by i{width:20px;height:20px;border-radius:50%;color:#fff;font-style:normal;font-size:12px;display:flex;align-items:center;justify-content:center}
#tm-qv .by span{margin-left:4px}
#tm-qv .tm-tags{margin:0}
#tm-qv p{margin:0;color:var(--s11);font-size:14px;line-height:1.75}
#tm-qv .lab{font-size:14px;color:var(--s12);font-weight:600;margin-bottom:8px}
#tm-qv .hl{display:flex;flex-wrap:wrap;gap:6px}
#tm-qv .hl span{border:var(--hair) solid var(--s7);border-radius:4px;padding:0 8px;font-size:12px;line-height:24px;color:var(--s11)}
#tm-qv .fit{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;color:var(--j11)}
#tm-qv .cta{margin-top:auto;display:flex;flex-direction:column;gap:8px}
#tm-qv .cta a.use{display:block;text-align:center;background:var(--j9);color:#fff;border-radius:6px;padding:10px 0;font-size:16px;font-weight:600}
#tm-qv .cta a.use:hover{background:var(--j10)}
#tm-qv .cta .note{display:flex;justify-content:space-between;color:var(--s9);font-size:12px}
#tm-qv .cta .note a:hover{color:var(--j11)}
#tm-qv .x{position:absolute;right:12px;top:12px;width:32px;height:32px;border:0;border-radius:6px;background:transparent;cursor:pointer;color:var(--s9);font-size:18px;line-height:32px;padding:0}
#tm-qv .x:hover{background:var(--s3);color:var(--s12)}
#tm-qv .nav{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;background:var(--s1);color:var(--s12);font-size:18px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);padding:0}
#tm-qv .nav:hover{background:var(--s3)}
#tm-qv .prev{left:max(8px,calc(50% - 560px))}
#tm-qv .next{right:max(8px,calc(50% - 560px))}
#tm-qv .nav:disabled{opacity:.3;cursor:default}

@media (max-width:1100px){#tplmod-root .tm-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){#tplmod-root .tm-grid{grid-template-columns:repeat(3,1fr)}#tplmod-root .tm-mega.open{grid-template-columns:120px 1fr}}
@media (max-width:760px){#tm-qv{padding:0}#tm-qv .box{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100%;border-radius:0;overflow:auto}#tm-qv .doc{padding:16px;height:auto}#tm-qv .doc .a4{height:auto;width:100%}#tm-qv .side{overflow:visible;padding-bottom:0}#tm-qv .nav{display:none}
  #tm-qv .x{position:fixed;top:10px;right:10px;z-index:3;background:var(--s1);box-shadow:0 2px 8px rgba(0,0,0,.15)}
  #tm-qv .cta{position:sticky;bottom:0;background:var(--s1);padding:10px 0 14px;margin-top:8px;box-shadow:inset 0 var(--hair) 0 var(--s6)}}
@media (max-width:640px){
  #tplmod-root{padding:24px 0 40px}#tplmod-root .tm-w{padding:0 16px}
  #tplmod-root .tm-head{flex-direction:column-reverse;align-items:stretch;gap:8px}#tplmod-root .tm-tools{text-align:right;padding-bottom:0}
  #tplmod-root .tm-tabs{gap:24px;overflow-x:auto}
  #tplmod-root .tm-l1{flex-wrap:nowrap;overflow-x:auto}#tplmod-root .tm-pill{flex:0 0 auto}
  #tplmod-root .tm-l3,#tplmod-root .tm-mega .g3{grid-template-columns:repeat(3,1fr)}
  #tplmod-root .tm-grid{grid-template-columns:repeat(2,1fr);gap:16px 8px}
}
#tm-qv .sim{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#tm-qv .sim button{padding:0;border:0;border-radius:4px;background:#fff;box-shadow:0 0 0 var(--hair) var(--s6);aspect-ratio:210/297;overflow:hidden;cursor:pointer}
#tm-qv .sim button:hover{box-shadow:0 0 0 1px var(--j8)}
#tm-qv .sim img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
