/**
 * 淘宝主图制作工具 的样式（原来写在模板的内联 <style> 里）
 *
 * 搬出来的原因：内联样式每次请求都跟着 HTML 重下，浏览器缓存不了。
 * 现在由 functions.php 的 xianer_page_styles() 按模板单独 enqueue，版本号走 filemtime。
 * 新增工具照 tools.css 头部那份约定来。
 */
.tbt-templates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tbt-tpl{padding:10px 6px;border-radius:12px;border:2px solid transparent;cursor:pointer;text-align:center;font-size:13px;line-height:1.5;transition:all .2s;background:none;color:inherit}
.tbt-tpl small{opacity:.6;font-size:11px;line-height:1.35;display:inline-block;margin-top:2px}
.tbt-tpl.active{border-color:var(--brand);background:var(--brand-soft)}
.tbt-tpl-ico{display:block;font-size:20px;margin-bottom:4px}
/* 权限：锁住的模板给个角标，看不出能不能用就尴尬了 */
.tbt-tpl{position:relative}
.tbt-tpl.locked{opacity:.5}
.tbt-tpl-tag{position:absolute;top:5px;right:5px;font-size:9.5px;line-height:1;padding:3px 5px;border-radius:6px;background:var(--brand-soft);color:var(--brand);font-weight:700;letter-spacing:.3px}
.tbt-svip-tip,.tbt-gate-tip{margin-top:8px}
.tbt-svip-tip a,.tbt-gate-tip a{color:var(--brand);font-weight:600}
.tbt-gate-tip{color:var(--brand)}
/* 画布区：方形 / 竖版都整张完整显示。
   主题里的 .xat-stage 是 1:1 方框 + overflow:hidden（max-width 480），竖版画布比它高，
   上下会被裁掉一截，所以这里把方框解开、高度交给画布自己撑，并按视口给竖版留足高度。 */
.xat-stagewrap{top:88px}                      /* 吸顶时别缩到悬浮导航条底下 */
.xat-stagewrap .tbt-stage{aspect-ratio:auto;max-width:100%;height:auto;overflow:visible;background:none}
.tbt-stage{display:flex;align-items:center;justify-content:center}
.tbt-stage canvas{display:block;max-width:100%;max-height:calc(100vh - 190px);width:auto;height:auto;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.2);cursor:default;touch-action:none}
@media (max-width:900px){.xat-stagewrap .tbt-stage{max-width:460px}}
.tbt-fmt{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.tbt-fmt-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:10px;border:2px solid transparent;background:rgba(128,128,128,.10);color:inherit;cursor:pointer;font-size:12.5px;line-height:1.3;transition:all .2s}
.tbt-fmt-btn small{font-size:11px;opacity:.6}
.tbt-fmt-btn.active{border-color:var(--brand);background:var(--brand-soft)}
.tbt-fmt-ico{width:16px;height:16px;border:1.6px solid currentColor;border-radius:3px;display:inline-block;margin-bottom:2px}
.tbt-fmt-ico-tall{width:12px;height:16px}
.tbt-stage canvas.tbt-moving{cursor:grabbing}
.tbt-stage canvas.tbt-hover{cursor:move}
.tbt-draghint{font-size:12px;opacity:.62;text-align:center;margin:8px 0 0;line-height:1.6}
.tbt-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;min-height:60px}
.tbt-slot{width:54px;height:54px;border-radius:10px;overflow:hidden;position:relative;border:2px dashed rgba(128,128,128,.4);background:rgba(128,128,128,.08)}
.tbt-slot img{width:100%;height:100%;object-fit:cover;display:block}
.tbt-slot .tbt-del{position:absolute;top:0;right:0;width:16px;height:16px;background:rgba(255,0,0,.85);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:0 0 0 8px}
/* 媒体库：按图片实际比例展示，不再裁成 1:1 方形；排列跟首页一样用「分列」
   （JS 把图一张张放进固定的一列），所以「加载更多」只是往列尾追加。
   不要用 CSS 多列（column-count）：浏览器会为了平衡列高把已经显示的图挪到别的列去，
   点一次「加载更多」前面的图就跳位了。 */
.tbt-mscroll{max-height:360px;overflow-y:auto;overflow-x:hidden}
#xatMediaList{display:flex;align-items:flex-start;column-count:auto;max-height:none;overflow:visible}
#xatMediaList .masonry-col{flex:1;min-width:0}
#xatMediaList .xat-media{display:block;width:100%;height:auto;padding:0;margin:0 0 8px;border-radius:8px;overflow:hidden;background:var(--bg)}
#xatMediaList .xat-media img{position:static;width:100%;height:auto;display:block}
/* 媒体库：点一下立刻有反馈（载入中 / 已选），不用干等图片下载。
   注意 z-index：缩略图悬停会 scale(1.06)，transform 会新建层叠上下文，
   不加 z-index 的话角标会被图片盖住（看着像没打上钩）。 */
#xatMediaList .xat-media.is-loading{opacity:.5}
#xatMediaList .xat-media.is-loading::after{content:'载入中…';position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;line-height:1;padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.66);color:#fff;white-space:nowrap}
#xatMediaList .xat-media.is-picked{box-shadow:inset 0 0 0 2px var(--brand)}
#xatMediaList .xat-media.is-picked::before{content:'✓';position:absolute;z-index:3;right:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;line-height:16px;text-align:center}
/* 深色模式下 --brand 是浅色，钩子要换成深色才看得清 */
html.dark #xatMediaList .xat-media.is-picked::before{color:#111116}
.tbt-fields{display:flex;flex-direction:column;gap:8px}
.tbt-field label{font-size:12px;opacity:.7;display:block;margin-bottom:4px}
.tbt-field input[type=text]{width:100%;padding:7px 10px;border-radius:8px;border:1px solid rgba(128,128,128,.25);background:rgba(128,128,128,.08);color:inherit;font-size:13px}
html.dark .tbt-field input[type=text]{color:#fff}
.tbt-layers{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow:auto}
.tbt-layer{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;background:rgba(128,128,128,.08);border:1px solid transparent}
.tbt-layer.active{border-color:var(--brand);background:var(--brand-soft)}
.tbt-layer .tbt-layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbt-layer .tbt-layer-eye,.tbt-layer .tbt-layer-del{opacity:.5;padding:0 2px;cursor:pointer;font-size:12px}
.tbt-layer .tbt-layer-eye:hover,.tbt-layer .tbt-layer-del:hover{opacity:1}
.tbt-layer-count{font-size:11px;opacity:.5;font-weight:400}
.tbt-layer-ops{display:flex;gap:6px;margin-top:8px}
.tbt-layer-ops .xat-btn{flex:1;padding:6px 4px;font-size:12px}
/* 图层下面的一键开关：勾上就把所有手机上的锁屏时间 / 主屏图标去掉 */
.tbt-switches{margin-top:10px;padding-top:9px;border-top:1px solid rgba(128,128,128,.18);display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.tbt-switches label{display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.85}
.tbt-switches label:hover{opacity:1}
/* 锁屏运营商那行字：VIP 可改；非 VIP 置灰，点一下提示去开通 */
.tbt-carrier{margin-top:2px;display:flex;flex-direction:column;gap:6px}
.tbt-carrier-head{display:flex;align-items:center;justify-content:space-between;opacity:.75}
.tbt-carrier-vip{font-size:9.5px;line-height:1;padding:3px 5px;border-radius:6px;background:var(--brand-soft);color:var(--brand);font-weight:700;letter-spacing:.3px}
.tbt-carrier-vip[hidden]{display:none}
.tbt-carrier-row{display:flex;gap:6px}
.tbt-carrier-row .xat-btn{flex:1;padding:4px 2px;font-size:11.5px}
.tbt-carrier-row .xat-btn.tbt-carrier-on{background:var(--brand-soft);color:var(--brand);font-weight:700}
.tbt-carrier-input{width:100%;box-sizing:border-box;padding:5px 8px;border-radius:7px;border:1px solid rgba(128,128,128,.25);background:rgba(128,128,128,.08);color:inherit;font-size:12px}
.tbt-carrier.locked{opacity:.55}
.tbt-carrier.locked .xat-btn,.tbt-carrier.locked .tbt-carrier-input{cursor:not-allowed}
.tbt-props{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.tbt-props .tbt-props-row{display:flex;align-items:center;gap:8px;font-size:12px}
.tbt-props .tbt-props-row>label{width:46px;opacity:.7;flex-shrink:0}
.tbt-props input[type=range]{flex:1;min-width:0}
.tbt-props input[type=text]{flex:1;min-width:0;padding:5px 8px;border-radius:7px;border:1px solid rgba(128,128,128,.25);background:rgba(128,128,128,.08);color:inherit;font-size:12px}
.tbt-props input[type=color]{width:42px;height:26px;border:none;background:none;cursor:pointer}
.tbt-props .tbt-empty{opacity:.55;font-size:12px;line-height:1.6}
.tbt-mini{display:flex;gap:6px;flex:1}
.tbt-mini .xat-btn{flex:1;padding:5px 2px;font-size:11.5px}
/* 「已选图片」标题那一行：左边标题、右边「清除已选」（没选图时是禁用态，见 .xat-btn:disabled） */
.tbt-selhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tbt-clear-sel{padding:3px 10px;font-size:11.5px;line-height:1.5}