:root{
  --pink:#fc8b8f; --pink-d:#ee6a75; --pink-l:#ffe6e9; --pink-bg:#fff6f7;
  --ink:#23232b; --ink2:#5b5b6b; --ink3:#8d8d9c;
  --line:#ecebf1; --bg:#f6f7fb; --card:#fff;
  --ok:#18a058; --warn:#f0a020; --err:#e04a4a;
  --r:14px; --sh:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.62 system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
/* ---------- 布局 ---------- */
#app{display:flex;min-height:100vh}
.side{
  width:212px;flex:none;background:var(--card);border-right:1px solid var(--line);
  padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;border-bottom:1px solid var(--line)}
.brand b{display:block;font-size:15px}
.brand small{color:var(--ink3);font-size:12px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px var(--pink-l);flex:none}
.side nav{display:flex;flex-direction:column;gap:4px}
.side nav a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;color:var(--ink2);font-weight:500}
.side nav a i{font-style:normal;width:18px;text-align:center;opacity:.85}
.side nav a:hover{background:#fafafd;color:var(--ink)}
.side nav a.on{background:var(--pink-bg);color:var(--pink-d);font-weight:600}
.side-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:12px;border-top:1px solid var(--line);color:var(--ink3);font-size:12px}
main{flex:1;min-width:0;padding:26px 30px 60px;max-width:1180px}
.pg-head{margin-bottom:16px}
.pg-head h1{font-size:21px;margin:0 0 4px}
.pg-head p{margin:0;color:var(--ink3);font-size:13px}
.pg-head button{margin-top:10px}
/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:18px 20px;margin-bottom:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head h2{font-size:15px;margin:0}
/* ---------- 表单 ---------- */
.field{display:block;margin-bottom:14px}
.lab{display:block;font-size:12.5px;color:var(--ink2);font-weight:600;margin-bottom:6px}
.lab em{font-style:normal;font-weight:400;color:var(--ink3);font-size:12px;margin-left:4px}
input[type=text],input:not([type]),input[type=password],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1px solid #e3e2ea;border-radius:10px;background:#fdfdfe;
  font:inherit;color:var(--ink);outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--pink);background:#fff;box-shadow:0 0 0 3px var(--pink-l)}
textarea{resize:vertical}
.grid3{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:12px}
.rounds{display:flex;flex-direction:column;gap:8px}
.roundrow{display:flex;align-items:center;gap:10px;background:#fafafd;border:1px solid var(--line);
  border-radius:10px;padding:8px 10px}
.roundrow span.no{flex:none;width:52px;color:var(--ink3);font-size:12.5px;font-weight:600}
.roundrow select{flex:1}
.row-btns{display:flex;gap:8px;margin-top:10px}
.switches{display:flex;flex-direction:column;gap:8px;margin:4px 0 16px;padding:12px 14px;
  background:#fafafd;border:1px dashed #e6e5ee;border-radius:10px}
.sw{display:flex;align-items:center;gap:9px;color:var(--ink2);font-size:13px;cursor:pointer}
.sw input{width:16px;height:16px;accent-color:var(--pink-d)}
.actions{display:flex;align-items:center;gap:14px}
.hint{color:var(--ink3);font-size:12.5px}
/* ---------- 按钮 ---------- */
.btn{border:1px solid transparent;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;
  cursor:pointer;transition:.15s;background:#fff}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px}
.btn.primary{background:var(--pink);color:#fff}
.btn.primary:hover{background:var(--pink-d)}
.btn.primary:disabled{background:#f2c3c5;cursor:not-allowed}
.btn.ghost{border-color:#e3e2ea;color:var(--ink2);background:#fff}
.btn.ghost:hover{border-color:var(--pink);color:var(--pink-d)}
.btn.block{width:100%;margin-top:6px}
/* ---------- 状态/日志 ---------- */
.pill{padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600;background:#f1f1f6;color:var(--ink2)}
.pill.running{background:#fff4e0;color:#b8720a}
.pill.done{background:#e8f8ee;color:var(--ok)}
.pill.error{background:#fdeaea;color:var(--err)}
.log{margin-top:6px;background:#1e1e28;color:#d9d9e3;border-radius:10px;padding:12px 14px;
  font:12px/1.65 ui-monospace,Menlo,Consolas,monospace;max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.preview{border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-top:12px;max-height:560px;overflow:auto;background:#fff}
.preview h2{font-size:16.5px;margin:20px 0 8px;padding-left:10px;border-left:4px solid var(--pink);line-height:1.4}
.preview h3{font-size:14.5px;margin:16px 0 6px;color:var(--ink)}
.preview p{margin:9px 0}
.preview li{margin:5px 0}
.preview strong{font-weight:700}
.kv{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed #f0eff5;font-size:13px}
.kv:last-child{border-bottom:0}
.kv b{flex:none;width:74px;color:var(--ink3);font-weight:600}
.kv span{color:var(--ink);word-break:break-word}
.pubbox{margin-top:12px;padding:11px 14px;border-radius:10px;background:#e8f8ee;color:#146c39;font-size:13px}
.pubbox.bad{background:#fdeaea;color:#a63a3a}
.pubbox a{color:#146c39;text-decoration:underline}
/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--ink3);font-weight:600;font-size:12.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid #f5f4f9;vertical-align:top}
.tbl tr:hover td{background:#fcfcfe}
.tbl .t-title{max-width:420px}
/* ---------- 登录 ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(160deg,#fff6f7,#f6f7fb 60%)}
.login-card{width:352px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 10px 40px rgba(16,24,40,.08);padding:28px 26px}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.login-brand b{font-size:17px}
.login-brand small{color:var(--ink3)}
.login-tip{margin:0 0 18px;color:var(--ink3);font-size:12.5px}
.login-card label{display:block;font-size:12.5px;color:var(--ink2);font-weight:600;margin-bottom:12px}
.login-card label input{margin-top:6px;font-weight:400}
.login-msg{color:var(--err);font-size:12.5px;margin-top:10px;min-height:18px}
/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#23232b;color:#fff;
  padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:99}
@media (max-width:820px){
  #app{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto}
  .side nav{flex-direction:row}
  .side-foot{margin:0;border:0;padding:0}
  main{padding:18px}
  .grid3{grid-template-columns:1fr}
}