:root{--green:#60a080;--bg:#f3f5f1;--line:#dfe6df}
*{box-sizing:border-box}
body{margin:0;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:#333}
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem}
header h1{font-size:1.05rem;margin:0;flex:1}
header h1 small{color:#8a9a8a;font-weight:normal;font-size:.75rem;margin-left:.5rem}
.btn{background:var(--green);color:#fff;border:none;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:#fff;color:var(--green);border:1.5px solid var(--green)}
.btn.danger{background:#fff;color:#c05040;border:1.5px solid #e0b0a8}
.btn:disabled{opacity:.45;cursor:default}
.wrap{display:flex;gap:1rem;padding:1rem;align-items:flex-start}
#matrixScroll{flex:1;overflow:auto;max-height:calc(100vh - 90px);border:1px solid var(--line);border-radius:12px;background:#fff;padding:1rem}
table.grid{border-collapse:separate;border-spacing:3px}
th.col{font-size:.85rem;padding:.2rem;color:#444;min-width:150px;position:relative}
th.col .ren{position:absolute;right:4px;top:50%;transform:translateY(-50%);opacity:0;border:none;background:none;color:#8a9a8a;cursor:pointer;font-size:.8rem;padding:0 2px}
th.col:hover .ren{opacity:1}
th.col .ren:hover{color:var(--green)}
th.row{font-size:.85rem;padding:.2rem;color:#444;text-align:right;white-space:nowrap}
th.corner{color:#9ab;font-size:.75rem;text-align:left;vertical-align:bottom}
td.cell{background:#fbfcfa;border:1.5px dashed transparent;border-radius:10px;cursor:pointer;position:relative;width:170px;height:170px;overflow:hidden}
td.cell:hover{border-color:var(--green)}
td.cell.sel{border:2px solid var(--green);box-shadow:0 0 0 3px rgba(96,160,128,.25)}
td.cell img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
td.cell .wait{width:86%;height:86%;margin:7%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.3rem;color:#5a9a72;font-size:.75rem;border:2px dashed var(--green);border-radius:10px;background:rgba(96,160,128,.06);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
td.cell .badge{position:absolute;right:5px;bottom:5px;background:rgba(51,68,51,.72);color:#fff;font-size:.68rem;border-radius:99px;padding:.1rem .45rem}
td.cell.busy::after{content:"生成中…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.82);color:var(--green);font-size:.9rem}
td.cell.empty{border:1.5px dashed #b9c8b9;color:#9ab;font-size:.8rem}
td.cell.empty.busy::after{content:"排队/生成中…";color:#9ab}
th.gapc{width:18px;min-width:18px;padding:0}
td.gapc{width:18px;min-width:18px;padding:0}
tr.gapr th.gapcell{width:26px;padding:0}
tr.gapr td{height:10px;padding:0}
tr.gapr td.gapline{border-top:2px dashed transparent}
.insprev{position:relative}
/* 插入预览线：落在间隙正中间（列＝竖虚线贯穿，行＝横虚线全幅） */
th.insprev,td.insprev{background-image:repeating-linear-gradient(180deg,var(--green) 0 7px,transparent 7px 14px);background-position:center;background-size:2px 100%;background-repeat:no-repeat;background-color:rgba(96,160,128,.05)}
tr.gapr.insprev td.gapline,tr.gapr.insprev th.gapcell{background-image:repeating-linear-gradient(90deg,var(--green) 0 7px,transparent 7px 14px);background-position:center;background-size:100% 2px;background-repeat:no-repeat;background-color:rgba(96,160,128,.05)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--green);border-top-color:transparent;border-radius:50%;animation:s 1s linear infinite;margin-right:6px;vertical-align:-2px}
@keyframes s{to{transform:rotate(1turn)}}
th .ins{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:0 auto;border-radius:50%;border:1.5px dashed var(--green);background:#fff;color:var(--green);cursor:pointer;font-size:15px;line-height:0;padding:0;font-weight:bold}
th.gapcell .ins{margin-top:-2px}
th .ins:hover{background:var(--green);color:#fff}
#panel{width:330px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem;position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto;flex-shrink:0}
#panel h2{font-size:.95rem;margin:0 0 .3rem}
#panel .hint{color:#8a9a8a;font-size:.8rem;margin-bottom:.7rem}
.vitem{display:flex;gap:.6rem;border:1.5px solid var(--line);border-radius:10px;padding:.5rem;margin-bottom:.5rem;align-items:center}
.vitem.active{border-color:var(--green);background:#f2f8f4}
.vitem img{width:64px;height:64px;object-fit:contain;border-radius:6px;background:#f6f8f6}
.vitem .meta{flex:1;font-size:.75rem;color:#667}
.vitem .meta b{display:block;font-size:.82rem;color:#333}
.vitem .ops{display:flex;flex-direction:column;gap:.25rem}
.vitem .ops button{font-size:.7rem;padding:.15rem .5rem}
textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:.5rem;font-size:.85rem;resize:vertical;min-height:64px;font-family:inherit}
#insModal{position:fixed;inset:0;background:rgba(40,50,40,.4);display:none;align-items:center;justify-content:center;z-index:50}
#insModal.show{display:flex}
.imbox{background:#fff;border-radius:14px;padding:1.3rem 1.5rem;width:380px;box-shadow:0 12px 48px rgba(30,45,30,.25)}
.imbox h3{margin:0 0 .9rem;font-size:1rem;color:#333}
.imbox input,.imbox textarea{width:100%;margin-bottom:.7rem;border:1.5px solid var(--line);border-radius:8px;padding:.5rem .6rem;font-size:.85rem;font-family:inherit;resize:vertical;box-sizing:border-box}
.imrow{display:flex;gap:.6rem;justify-content:flex-end}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#33413a;color:#fff;padding:.55rem 1.1rem;border-radius:99px;font-size:.85rem;opacity:0;transition:.3s;pointer-events:none;z-index:99}
#toast.show{opacity:.95}
#dl a{display:block;margin-top:.4rem;font-size:.8rem;color:var(--green)}
.legend{font-size:.72rem;color:#8a9a8a;margin-top:.6rem;line-height:1.6}