*{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#2f9e44; --green-d:#0a8f3c; --green-l:#e7f6ec;
  --orange:#f26b0f;
  --text:#222; --muted:#888; --line:#e5e7eb; --bg:#f1f3f5;
}
body{font:14px/1.6 "Microsoft YaHei","PingFang SC",sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
#app{display:grid;grid-template-columns:440px 1fr;height:100vh}

/* ===== 左面板 ===== */
#panel{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}
#panel header{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;padding:14px 18px}
#panel header h1{font-size:17px;display:flex;align-items:center;gap:8px}
#panel header .logo{font-size:22px}
#panel header .sub{font-size:11.5px;opacity:.88;margin-top:2px}

.tabs{display:flex;border-bottom:1px solid var(--line);background:#fafafa}
.tab{flex:1;padding:11px 4px;border:0;background:none;cursor:pointer;font-size:13.5px;color:#666;border-bottom:2px solid transparent}
.tab.active{color:var(--green-d);border-bottom-color:var(--green);font-weight:700}

.tab-body{flex:1;overflow-y:auto;position:relative}
.pane{display:none;padding:16px 18px}
.pane.active{display:block}
.pane h3{font-size:14px;margin:18px 0 8px;padding-top:6px}
.pane h3:first-child{margin-top:0}

.fld{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fld>span{width:82px;flex:none;font-size:13px;color:#555}
.fld input,.fld select{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13.5px;min-width:0}

.btn{padding:9px 14px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{border-color:var(--green);color:var(--green-d)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-d);color:#fff}
.btn.success{background:#12b886;border-color:#12b886;color:#fff}
.btn.success:hover{background:#0ca678;color:#fff}
.btn.block{width:100%;margin:8px 0}
.btn-group{display:flex;gap:8px;margin:6px 0}
.btn-group .btn{flex:1}

.hint{font-size:12px;color:var(--muted);line-height:1.7;margin-top:8px}
.hint b{color:var(--orange)}

.cur-tpl{font-size:13.5px;font-weight:600;color:var(--green-d)}

.pane-bar{display:flex;gap:8px;margin-bottom:12px}
.pane-bar input,.pane-bar select{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13.5px}

/* 门店列表 */
.item-list{list-style:none;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.item-list li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.item-list li:last-child{border-bottom:0}
.item-list li input[type=checkbox]{width:16px;height:16px}
.item-list .nm{flex:1;font-size:13.5px}
.item-list .del{border:0;background:none;color:#bbb;cursor:pointer;font-size:16px}
.item-list .del:hover{color:#e03131}

/* 商品表 */
.table-wrap{border:1px solid var(--line);border-radius:8px;overflow-x:auto;max-height:46vh;overflow-y:auto}
table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
table.grid th{background:#f6f8f7;padding:7px 6px;text-align:left;font-weight:600;color:#555;position:sticky;top:0}
table.grid td{padding:3px 4px;border-top:1px solid #f0f0f0}
table.grid input{width:100%;border:1px solid transparent;border-radius:4px;padding:5px 6px;font-size:12.5px;background:transparent}
table.grid input:focus{border-color:var(--green);background:#fff;outline:none}
table.grid .del-cell{width:30px;text-align:center}
table.grid .del-cell button{border:0;background:none;color:#bbb;cursor:pointer;font-size:15px}

/* 模板 */
.tpl-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.tpl-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer}
.tpl-item.active{border-color:var(--green);background:var(--green-l)}
.tpl-item .dot{width:10px;height:10px;border-radius:50%;background:#bbb}
.tpl-item.active .dot{background:var(--green)}
.tpl-item .nm{flex:1;font-weight:600;font-size:13.5px}
.tpl-item .meta{font-size:11.5px;color:var(--muted)}
.tpl-item .use{font-size:12px;color:var(--green-d)}
.tpl-item .del{border:0;background:none;color:#bbb;cursor:pointer;font-size:15px}

.feed-box{border:1px dashed #bbb;border-radius:10px;padding:14px;background:#fafbfa}
.feed-box h3{margin:0 0 6px;font-size:14px}
.upload{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin:8px 0;cursor:pointer;background:#fff}
.upload:hover{border-color:var(--green)}
.upload input{display:none}
.upload span{font-size:13px}
.upload em{font-size:11.5px;color:var(--muted);font-style:normal}
.feed-report{background:#fff8e6;border:1px solid #ffe08a;border-radius:8px;padding:10px 12px;font-size:12.5px;margin:10px 0;display:none;white-space:pre-line}
.feed-report.show{display:block}
.feed-report.ok{background:#ebfbee;border-color:#8ce99a}
.feed-report.bad{background:#fff0f0;border-color:#ffa8a8}
.feed-verify img{width:100%;border:1px solid var(--line);border-radius:8px;margin-top:10px}
.hidden{display:none !important}

textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;font-family:inherit;resize:vertical}

/* ===== 右预览 ===== */
#preview{display:flex;flex-direction:column;background:#e9ecef;position:relative;z-index:1}
#pv-top{background:#fff;border-bottom:1px solid var(--line);padding:10px 18px;display:flex;align-items:center;gap:12px}
.pv-label{font-size:13px;color:#555}
#pv-size{font-size:12px;color:var(--muted)}
.spacer{flex:1}
#pv-wrap{flex:1;overflow:auto;padding:24px;display:flex;justify-content:center;align-items:flex-start}
#canvas{width:400px;max-width:100%;box-shadow:0 6px 30px rgba(0,0,0,.18);border-radius:4px;background:#fff}

#toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);background:rgba(30,30,30,.92);color:#fff;padding:10px 20px;border-radius:24px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:99;max-width:80vw;text-align:center}
#toast.show{opacity:1}
#toast.bad{background:#c92a2a}
#toast.ok{background:#2f9e44}

@media (max-width:860px){
  body{overflow:auto;height:auto}
  #app{grid-template-columns:1fr;height:auto}
  #preview{min-height:70vh}
}