/* IMG.DIY 素材库 v2 — Eagle 品质的应用界面。适配站点亮/暗主题。 */
:root{
  --lb-bg:#f4f5f7;--lb-panel:#ffffff;--lb-side:#f7f7f8;--lb-line:#e6e7ea;
  --lb-text:#1f2329;--lb-mut:#6b7280;--lb-blue:var(--accent,#2383e2);
  --lb-hov:rgba(35,131,226,.08);--lb-on:rgba(35,131,226,.14);
  --lb-shadow:0 1px 3px rgba(16,24,40,.08),0 4px 14px rgba(16,24,40,.06);
  --lb-shadow-lg:0 12px 40px rgba(16,24,40,.18);
}
[data-theme="dark"]{
  --lb-bg:#17181b;--lb-panel:#202226;--lb-side:#1b1d20;--lb-line:#32353b;
  --lb-text:#e8eaed;--lb-mut:#9aa0a6;
  --lb-hov:rgba(82,156,202,.12);--lb-on:rgba(82,156,202,.2);
  --lb-shadow:0 1px 3px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --lb-shadow-lg:0 12px 40px rgba(0,0,0,.55);
}
html,body{height:100%}
body.lb-body{overflow:hidden;display:flex;flex-direction:column;background:var(--lb-bg);
  color:var(--lb-text);font-size:13.5px}
body.lb-body *{box-sizing:border-box}

/* ============ 顶栏 ============ */
.lb-top{display:flex;align-items:center;gap:10px;padding:0 14px;height:54px;flex-shrink:0;
  background:var(--lb-panel);border-bottom:1px solid var(--lb-line)}
.lb-top .brand{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--lb-text);font-size:.95rem;text-decoration:none}
.lb-top .brand:hover{text-decoration:none;opacity:.8}
.lb-top .brand .logo{width:22px;height:22px;color:var(--lb-blue)}
.lb-top .brand .logo svg{width:100%;height:100%}
.lb-top .brand em{font-style:normal;color:var(--lb-blue)}
.lb-appname{font-weight:600;color:var(--lb-mut);font-size:.88rem;padding-left:10px;border-left:1px solid var(--lb-line)}
.lb-q-wrap{flex:0 1 460px;position:relative;margin-left:8px}
.lb-q-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--lb-mut)}
#lb-q{width:100%;padding:7.5px 12px 7.5px 32px;border:1px solid var(--lb-line);border-radius:9px;
  background:var(--lb-bg);color:var(--lb-text);font-family:inherit;font-size:.9rem;transition:border-color .15s,box-shadow .15s}
#lb-q:focus{outline:none;border-color:var(--lb-blue);box-shadow:0 0 0 3px var(--lb-hov);background:var(--lb-panel)}
.lb-top .spacer{flex:1}
.lb-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;
  border:1px solid var(--lb-line);background:var(--lb-panel);color:var(--lb-text);
  font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:border-color .12s,color .12s,background .12s,transform .1s}
.lb-btn:hover{border-color:var(--lb-blue);color:var(--lb-blue)}
.lb-btn:active{transform:scale(.97)}
.lb-btn.pri{background:var(--lb-blue);border-color:var(--lb-blue);color:#fff;
  box-shadow:0 2px 8px rgba(35,131,226,.3)}
.lb-btn.pri:hover{filter:brightness(1.08);color:#fff}
.lb-btn.danger:hover{border-color:#e5484d;color:#e5484d}
.lb-btn.ghost{border-color:transparent;background:transparent;color:var(--lb-mut)}
.lb-btn.ghost:hover{background:var(--lb-hov);color:var(--lb-blue)}
.lb-btn svg{width:15px;height:15px}

/* ============ 三栏 ============ */
.lb-wrap{flex:1;display:flex;min-height:0}
#lb-side{width:236px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--lb-line);
  padding:10px 9px 16px;background:var(--lb-side);display:flex;flex-direction:column}
#lb-side::-webkit-scrollbar{width:8px}
#lb-side::-webkit-scrollbar-thumb{background:var(--lb-line);border-radius:8px}
.lbs-sec{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--lb-mut);
  margin:15px 7px 5px;display:flex;align-items:center;justify-content:space-between}
.lbs-sec:first-child{margin-top:2px}
.lbs-add{border:none;background:none;color:var(--lb-mut);font-size:1.05rem;line-height:1;cursor:pointer;
  padding:1px 6px;border-radius:5px}
.lbs-add:hover{color:var(--lb-blue);background:var(--lb-hov)}
.lbs-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;
  color:var(--lb-text);font-size:.88rem;user-select:none;transition:background .1s}
.lbs-item:hover{background:var(--lb-hov)}
.lbs-item.on{background:var(--lb-on);color:var(--lb-blue);font-weight:600}
.lbs-item.dropover{outline:2px dashed var(--lb-blue);outline-offset:-2px;background:var(--lb-on)}
.lbs-ic{width:16px;height:16px;flex-shrink:0;color:var(--lb-mut);display:inline-flex}
.lbs-item.on .lbs-ic{color:var(--lb-blue)}
.lbs-ic svg{width:16px;height:16px}
.lbs-lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbs-ct{font-size:.72rem;color:var(--lb-mut);font-variant-numeric:tabular-nums}
.lbs-chev{color:var(--lb-mut);font-size:1rem;line-height:1;padding:0 4px;border-radius:4px;
  transform:rotate(0);transition:transform .15s;cursor:pointer}
.lbs-chev.open{transform:rotate(90deg)}
.lbs-chev:hover{background:var(--lb-hov)}
.lbs-del{border:none;background:none;color:var(--lb-mut);font-size:.7rem;cursor:pointer;
  padding:2px 5px;border-radius:4px;opacity:0}
.lbs-item:hover .lbs-del{opacity:1}
.lbs-del:hover{color:#e5484d;background:rgba(229,72,77,.1)}
.lbs-tags{display:flex;flex-wrap:wrap;gap:5px;padding:2px 7px}
.lbs-tag{border:1px solid var(--lb-line);background:var(--lb-panel);border-radius:99px;
  padding:2.5px 10px;font-size:.75rem;color:var(--lb-text);cursor:pointer;font-family:inherit;
  transition:all .12s}
.lbs-tag:hover{border-color:var(--lb-blue);color:var(--lb-blue)}
.lbs-tag.on{background:var(--lb-blue);border-color:var(--lb-blue);color:#fff}
.lbs-colors{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:5px 10px}
.lbs-color{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .12s}
.lbs-color:hover{transform:scale(1.15)}
.lbs-color.on{border-color:var(--lb-blue);transform:scale(1.15);box-shadow:0 0 0 2px var(--lb-panel),inset 0 0 0 1px rgba(0,0,0,.1)}
.lbs-foot{margin-top:auto;padding:14px 7px 0;border-top:1px solid var(--lb-line);display:flex;flex-direction:column;gap:8px}
.lbs-tool{border:1px dashed var(--lb-line);background:none;border-radius:8px;padding:7px;
  color:var(--lb-mut);font-size:.8rem;cursor:pointer;font-family:inherit}
.lbs-tool:hover{border-color:var(--lb-blue);color:var(--lb-blue)}
#lb-meter{font-size:.72rem;color:var(--lb-mut);text-align:center}

/* ============ 内容区 ============ */
#lb-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;background:var(--lb-bg)}
#lb-main.over::after{content:'松开鼠标,导入到素材库';position:absolute;inset:10px;z-index:9;
  border:2.5px dashed var(--lb-blue);border-radius:16px;background:var(--lb-hov);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:700;
  color:var(--lb-blue);pointer-events:none;backdrop-filter:blur(2px)}
.lb-toolbar{display:flex;align-items:center;gap:10px;padding:8px 16px;flex-wrap:wrap;
  background:var(--lb-panel);border-bottom:1px solid var(--lb-line)}
#lb-count{font-size:.8rem;color:var(--lb-mut);font-variant-numeric:tabular-nums}
.lb-toolbar select{padding:5.5px 8px;border:1px solid var(--lb-line);border-radius:8px;
  background:var(--lb-panel);color:var(--lb-text);font-family:inherit;font-size:.82rem;cursor:pointer}
#lb-views{display:inline-flex;border:1px solid var(--lb-line);border-radius:8px;overflow:hidden}
#lb-views button{border:none;background:var(--lb-panel);color:var(--lb-mut);padding:6px 10px;
  cursor:pointer;display:inline-flex;border-right:1px solid var(--lb-line)}
#lb-views button:last-child{border-right:none}
#lb-views button svg{width:15px;height:15px}
#lb-views button.on{background:var(--lb-on);color:var(--lb-blue)}
.lb-zoom{display:flex;align-items:center;gap:6px;color:var(--lb-mut)}
.lb-zoom svg{width:14px;height:14px}
.lb-zoom input{accent-color:var(--lb-blue);width:100px}
#lb-chips{display:flex;gap:8px;flex-wrap:wrap;padding:8px 16px 0}
.lb-chip{display:inline-flex;align-items:center;gap:6px;background:var(--lb-on);color:var(--lb-blue);
  border-radius:99px;padding:4px 6px 4px 12px;font-size:.8rem;font-weight:600}
.lb-chip button{border:none;background:rgba(35,131,226,.18);color:inherit;border-radius:50%;
  width:17px;height:17px;font-size:.62rem;cursor:pointer;display:grid;place-items:center}
.lb-chip button:hover{background:rgba(35,131,226,.35)}

/* ============ 瀑布流/网格/列表 ============ */
#lb-scroll{flex:1;overflow-y:auto;padding:16px 16px 90px}
#lb-scroll::-webkit-scrollbar{width:10px}
#lb-scroll::-webkit-scrollbar-thumb{background:var(--lb-line);border-radius:8px}
#lb-grid.view-waterfall{column-gap:14px}
#lb-grid.view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cell,230px),1fr));gap:14px}
#lb-grid.view-list{display:flex;flex-direction:column;gap:6px}
.lb-card{break-inside:avoid;margin-bottom:14px;border-radius:11px;overflow:hidden;
  background:var(--lb-panel);border:1px solid var(--lb-line);cursor:pointer;position:relative;
  transition:box-shadow .16s,transform .16s,border-color .16s}
.lb-card:hover{box-shadow:var(--lb-shadow-lg);transform:translateY(-2px)}
.lb-card.sel{border-color:var(--lb-blue);box-shadow:0 0 0 2.5px var(--lb-blue)}
.view-grid .lb-card{margin-bottom:0}
.lb-thumbwrap{position:relative;background:
  repeating-conic-gradient(rgba(127,127,127,.09) 0 25%,transparent 0 50%) 0 0/16px 16px}
.lb-card img{width:100%;display:block}
.view-grid .lb-thumbwrap{aspect-ratio:1}
.view-grid .lb-card img{height:100%;object-fit:cover}
.lb-badge{position:absolute;right:7px;bottom:7px;background:rgba(0,0,0,.55);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:5px;
  opacity:0;transition:opacity .15s;backdrop-filter:blur(4px)}
.lb-card:hover .lb-badge{opacity:1}
.lb-acts{position:absolute;top:7px;right:7px;display:flex;gap:5px;opacity:0;transition:opacity .15s}
.lb-card:hover .lb-acts{opacity:1}
.lb-act{width:28px;height:28px;border:none;border-radius:8px;background:rgba(0,0,0,.5);
  color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
.lb-act svg{width:14px;height:14px}
.lb-act:hover{background:rgba(0,0,0,.75)}
.lb-act.on{background:#e5484d}
.lb-check{position:absolute;top:7px;left:7px;width:22px;height:22px;border-radius:50%;
  background:var(--lb-blue);color:#fff;font-size:.72rem;display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:all .15s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.lb-card.sel .lb-check{opacity:1;transform:scale(1)}
.lb-favdot{position:absolute;top:9px;left:9px;color:#e5484d;opacity:.95}
.lb-favdot svg{width:15px;height:15px;fill:#e5484d}
.lb-card.sel .lb-favdot{opacity:0}
.lb-cardmeta{display:flex;align-items:center;gap:6px;padding:7px 11px 8px}
.lb-cardmeta .nm{flex:1;font-size:.77rem;color:var(--lb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-cardmeta .rt{font-size:.66rem;color:#f5a623;letter-spacing:-1px}
/* 列表行 */
.lb-row{display:flex;align-items:center;gap:12px;background:var(--lb-panel);border:1px solid var(--lb-line);
  border-radius:10px;padding:7px 12px;cursor:pointer;transition:border-color .12s}
.lb-row:hover{border-color:var(--lb-blue)}
.lb-row.sel{border-color:var(--lb-blue);box-shadow:0 0 0 2px var(--lb-blue)}
.lb-row img{width:52px;height:52px;object-fit:cover;border-radius:7px;flex-shrink:0;background:var(--lb-bg)}
.lb-rmain{flex:1;min-width:0}
.lb-rmain .nm{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-rmain .sub{font-size:.74rem;color:var(--lb-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-rc{font-size:.76rem;color:var(--lb-mut);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:70px;text-align:right}
.lb-rc.rt{color:#f5a623;min-width:56px}
/* 空态 */
.lb-empty{color:var(--lb-mut);text-align:center;padding:90px 20px;column-span:all;grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.lb-empty-ic svg{width:64px;height:64px;opacity:.3}
.lb-empty p{margin:0;font-size:.95rem}

/* ============ 批量条 ============ */
#lb-batch{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:8px;background:var(--lb-panel);border:1px solid var(--lb-line);
  border-radius:14px;padding:9px 14px;box-shadow:var(--lb-shadow-lg);animation:lb-pop .18s ease}
@keyframes lb-pop{from{transform:translateX(-50%) translateY(12px);opacity:0}}
#lb-batch-n{font-size:.84rem;font-weight:700;padding-right:4px}

/* ============ 导入进度 ============ */
#lb-progress{position:absolute;top:0;left:0;right:0;z-index:9;background:var(--lb-panel);
  border-bottom:1px solid var(--lb-line);padding:9px 16px;box-shadow:var(--lb-shadow)}
#lb-progtxt{font-size:.78rem;color:var(--lb-mut);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lb-progress .bar{height:5px;border-radius:99px;background:var(--lb-bg);overflow:hidden}
#lb-progbar{height:100%;width:0;background:var(--lb-blue);transition:width .2s;border-radius:99px}

/* ============ 灯箱 ============ */
#lb-view{position:fixed;inset:0;z-index:60;background:rgba(12,13,15,.94);display:flex;
  animation:lb-fade .15s ease}
@keyframes lb-fade{from{opacity:0}}
#lb-view .stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;
  min-width:0;overflow:hidden;cursor:zoom-in}
#lb-view .stage img{max-width:94%;max-height:94%;object-fit:contain;border-radius:4px;
  transition:transform .06s linear;
  background:repeating-conic-gradient(#3a3a3a 0 25%,#2e2e2e 0 50%) 0 0/16px 16px}
#lb-view .stage img.zoomed{cursor:grab;max-width:none;max-height:none}
.lbv-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:none;background:rgba(255,255,255,.1);color:#fff;font-size:1.5rem;cursor:pointer;
  transition:background .12s;display:grid;place-items:center;line-height:1}
.lbv-nav:hover{background:rgba(255,255,255,.25)}
#lbv-prev{left:20px}#lbv-next{right:20px}
#lbv-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(255,255,255,.1);color:#fff;font-size:1rem;cursor:pointer}
#lbv-close:hover{background:rgba(255,255,255,.25)}
.lbv-panel{width:308px;flex-shrink:0;background:var(--lb-panel);border-left:1px solid var(--lb-line);
  padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:13px}
.lbv-panel label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--lb-mut);
  display:block;margin-bottom:5px}
.lbv-panel input[type=text],.lbv-panel textarea,.lbv-panel select{width:100%;padding:8px 11px;
  border:1px solid var(--lb-line);border-radius:8px;background:var(--lb-bg);color:var(--lb-text);
  font-family:inherit;font-size:.86rem}
.lbv-panel input:focus,.lbv-panel textarea:focus,.lbv-panel select:focus{outline:none;border-color:var(--lb-blue)}
.lbv-panel textarea{min-height:64px;resize:vertical}
#lbv-info{font-size:.76rem;color:var(--lb-mut);font-variant-numeric:tabular-nums}
.lbv-favrow{display:flex;align-items:center;justify-content:space-between}
#lbv-fav{border:1px solid var(--lb-line);background:none;border-radius:8px;padding:6px 12px;
  color:var(--lb-mut);cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-family:inherit;font-size:.82rem}
#lbv-fav svg{width:14px;height:14px}
#lbv-fav.on{border-color:#e5484d;color:#e5484d}
#lbv-fav.on svg{fill:#e5484d}
#lbv-stars{display:flex;gap:3px;font-size:1.35rem;cursor:pointer;color:var(--lb-line);user-select:none}
#lbv-stars span{transition:color .1s,transform .1s}
#lbv-stars span:hover{transform:scale(1.2)}
#lbv-stars span.on{color:#f5a623}
#lbv-colors{display:flex;gap:8px}
.lbv-sw{width:27px;height:27px;border-radius:8px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  transition:transform .12s}
.lbv-sw:hover{transform:scale(1.15)}
.lbv-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}

/* ============ 弹窗 ============ */
.lbm-back{position:fixed;inset:0;z-index:70;background:rgba(15,17,20,.5);display:flex;
  align-items:center;justify-content:center;backdrop-filter:blur(3px);animation:lb-fade .15s ease}
.lbm{width:min(480px,92vw);max-height:82vh;display:flex;flex-direction:column;background:var(--lb-panel);
  border-radius:16px;box-shadow:var(--lb-shadow-lg);animation:lbm-in .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes lbm-in{from{transform:scale(.94);opacity:0}}
.lbm-h{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 0;
  font-weight:700;font-size:.98rem}
.lbm-x{border:none;background:none;color:var(--lb-mut);cursor:pointer;font-size:.9rem;
  width:28px;height:28px;border-radius:7px}
.lbm-x:hover{background:var(--lb-hov)}
.lbm-body{padding:14px 18px;overflow-y:auto}
.lbm-body p{margin:0;color:var(--lb-mut);font-size:.9rem;line-height:1.6}
.lbm-input{width:100%;padding:9px 12px;border:1px solid var(--lb-line);border-radius:9px;
  background:var(--lb-bg);color:var(--lb-text);font-family:inherit;font-size:.92rem}
.lbm-input:focus{outline:none;border-color:var(--lb-blue);box-shadow:0 0 0 3px var(--lb-hov)}
.lbm-btns{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 16px}
.lbm-menu{display:flex;flex-direction:column;gap:6px}
.lbm-menu .lb-btn{justify-content:flex-start}
.lbm-dups{display:flex;flex-direction:column;gap:14px}
.lbm-duprow{display:flex;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid var(--lb-line);border-radius:10px}
.lbm-dupitem{display:flex;flex-direction:column;gap:5px;width:110px;align-items:center}
.lbm-dupitem img{width:100%;height:80px;object-fit:cover;border-radius:7px;background:var(--lb-bg)}
.lbm-dupitem .nm{font-size:.68rem;color:var(--lb-mut);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbm-keep{font-size:.72rem;color:#30a46c;font-weight:700}
.lbm-keys{border-collapse:collapse;width:100%}
.lbm-keys td{padding:6px 8px;font-size:.86rem;color:var(--lb-mut)}
.lbm-keys kbd{background:var(--lb-bg);border:1px solid var(--lb-line);border-bottom-width:2px;
  border-radius:6px;padding:2px 8px;font-size:.78rem;color:var(--lb-text);font-family:inherit}

/* ============ toast ============ */
#lb-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);z-index:90;
  background:var(--lb-text);color:var(--lb-panel);padding:9px 20px;border-radius:99px;font-size:.86rem;
  font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--lb-shadow-lg)}
#lb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none!important}

/* ============ 落地页专属 ============ */
.tl-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px 0 40px}
@media(max-width:900px){.tl-hero{grid-template-columns:1fr}}
.tl-hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.18;margin:0 0 .5em}
.tl-hero h1 em{font-style:normal;color:var(--accent)}
.tl-hero .lead{color:var(--muted);font-size:1.08rem;max-width:52ch}
.tl-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}
.tl-cta .minor{font-size:.85rem;color:var(--muted)}
/* CSS 手绘应用窗口 mock */
.tl-mock{border-radius:14px;border:1px solid var(--border);overflow:hidden;
  box-shadow:0 24px 70px rgba(16,24,40,.18);background:var(--card,#fff);font-size:11px}
.tl-mock .bar{display:flex;gap:6px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border)}
.tl-mock .dot{width:9px;height:9px;border-radius:50%}
.tl-mock .win{display:flex;height:300px}
.tl-mock .sb{width:96px;border-right:1px solid var(--border);padding:8px 6px;display:flex;flex-direction:column;gap:5px;background:var(--bg-soft,#f7f7f8)}
.tl-mock .sb i{display:block;height:9px;border-radius:5px;background:var(--border);opacity:.8}
.tl-mock .sb i.a{background:var(--accent);opacity:.9;width:80%}
.tl-mock .sb .cs{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
.tl-mock .sb .cs b{width:10px;height:10px;border-radius:50%}
.tl-mock .gv{flex:1;padding:10px;column-count:3;column-gap:8px}
.tl-mock .gv i{display:block;border-radius:7px;margin-bottom:8px;break-inside:avoid}
.tl-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:26px 0}
.tl-feat{background:var(--card,#fff);border:1px solid var(--border);border-radius:14px;padding:20px}
.tl-feat .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(35,131,226,.1);color:var(--accent);margin-bottom:12px}
.tl-feat .ic svg{width:20px;height:20px}
.tl-feat h3{margin:0 0 5px;font-size:1rem}
.tl-feat p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.6}
.tl-cmp{width:100%;border-collapse:collapse;margin:18px 0;font-size:.88rem}
.tl-cmp th,.tl-cmp td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:left}
.tl-cmp th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tl-cmp td:first-child{font-weight:600}
.tl-ok{color:#30a46c;font-weight:700}
.tl-no{color:var(--muted)}
.tl-steps{counter-reset:s;display:grid;gap:12px;margin:20px 0;padding:0;list-style:none}
.tl-steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;color:var(--muted)}
.tl-steps li::before{content:counter(s);flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.tl-steps b{color:var(--text);display:block}

@media(max-width:860px){
  #lb-side{position:fixed;left:0;top:54px;bottom:0;z-index:20;transform:translateX(-100%);transition:transform .2s}
  #lb-side.open{transform:none;box-shadow:var(--lb-shadow-lg)}
  .lbv-panel{position:fixed;right:0;top:auto;bottom:0;left:0;width:100%;max-height:46vh;border-left:none;border-top:1px solid var(--lb-line)}
  .lb-appname,.lb-q-wrap{display:none}
}

/* 落地页真实感截图 */
.tl-shot{filter:drop-shadow(0 24px 70px rgba(16,24,40,.18));border-radius:16px}
.tl-shot svg{width:100%;height:auto;display:block;border-radius:16px}
[data-theme="dark"] .tl-shot{filter:drop-shadow(0 24px 70px rgba(0,0,0,.5))}