:root{
  --bg:#f7f7f5; --panel:#ffffff; --line:#e6e4df; --ink:#232323;
  --ink2:#5c5a55; --ink3:#8e8b84; --accent:#b4553c; --accent-soft:#fbf1ee;
  --tag:#f1efea; --radius:10px; --shadow:0 8px 30px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased}
button{font-family:inherit}
a{color:var(--accent);text-decoration:none}

/* ---------- 顶栏 ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(247,247,245,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{max-width:1320px;margin:0 auto;padding:13px 22px;display:flex;gap:14px;align-items:center;min-width:0}
.brand{font-weight:600;font-size:15px;letter-spacing:.02em;white-space:nowrap;flex:none;cursor:pointer}
.brand span{color:var(--accent)}
.brand .b-short{display:none}
.search{flex:1;position:relative;min-width:0}
.search input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);font-size:14.5px;color:var(--ink);outline:none}
.search input:focus{border-color:#c9c5bd;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.4}
.hint{font-size:12.5px;color:var(--ink3);white-space:nowrap}
.btn{padding:7px 13px;border:1px solid var(--line);background:var(--panel);border-radius:8px;
  font-size:13px;color:var(--ink2);cursor:pointer;transition:.12s;white-space:nowrap}
.btn:hover{border-color:#cfcabf;color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(.95);color:#fff}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.filter-btn{display:none}
.badge{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;
  border-radius:8px;background:var(--accent);color:#fff;font-size:10.5px;text-align:center;
  vertical-align:1px;margin-left:4px}

/* ---------- 布局 ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:22px;display:grid;
  grid-template-columns:232px minmax(0,1fr);gap:26px}
aside{position:sticky;top:74px;align-self:start;max-height:calc(100vh - 96px);
  overflow-y:auto;padding-right:4px}
.grp{margin-bottom:20px}
.grp h4{margin:0 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3)}
.chip{display:inline-block;padding:4px 10px;margin:0 5px 6px 0;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);font-size:12.5px;color:var(--ink2);cursor:pointer;
  user-select:none;transition:.12s}
.chip:hover{border-color:#cfcabf}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip b{font-weight:500;opacity:.55;margin-left:3px;font-size:11.5px}
.tag-grp{margin-bottom:6px}
.tag-grp .tg{font-size:11px;color:var(--ink3);margin:4px 0 3px}
main{min-width:0}

/* ---------- 工具条 ---------- */
.tools{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.meta{font-size:13px;color:var(--ink3)}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:10px;transition:.12s}
.card:hover{border-color:#d8d3c9;box-shadow:0 2px 8px rgba(0,0,0,.035)}
.card .top{display:flex;align-items:baseline;gap:9px;margin-bottom:3px;flex-wrap:wrap}
.kind{font-size:11px;padding:1px 6px;border-radius:4px;background:var(--tag);color:var(--ink3);
  white-space:nowrap;flex:none}
.kind.shot{background:#eef4f0;color:#3f6b52}
.kind.template{background:#eef1f7;color:#41587d}
.kind.jimeng{background:#f8f1ec;color:#8d5a3c}
.kind.style{background:#f0f2ee;color:#586b4a}
.kind.guide{background:#f3eff7;color:#5f4a78}
.id{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none}
.title{font-weight:550;font-size:14.5px;flex:1;min-width:0;word-break:break-word}
.body{color:var(--ink2);font-size:13.8px;margin:2px 0 0;word-break:break-word}
.body.md{white-space:pre-wrap;font-size:13px;max-height:240px;overflow:hidden;
  mask-image:linear-gradient(#000 80%,transparent)}
.tags{margin-top:7px}
.tag{font-size:11.5px;color:var(--ink3);margin-right:7px;cursor:pointer}
.tag:hover{color:var(--accent)}
.acts{float:right;display:flex;gap:10px;align-items:center;flex:none}
.act{font-size:11.5px;color:var(--ink3);cursor:pointer;opacity:0;transition:.12s;user-select:none}
.card:hover .act{opacity:1}
.act:hover{color:var(--accent)}
.act.faved{opacity:1;color:var(--accent)}
.empty{padding:60px 0;text-align:center;color:var(--ink3);font-size:14px}
.sentinel{height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--ink3);font-size:12.5px}

/* ---------- 组合器 ---------- */
.combo{display:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px}
.combo.show{display:block}
.combo h3{margin:0 0 12px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);display:flex;justify-content:space-between;align-items:center}
.row{display:flex;gap:10px;font-size:13.5px;margin-bottom:5px}
.row i{font-style:normal;color:var(--ink3);width:42px;flex:none;font-size:12.5px}
.final{margin-top:12px;padding:12px 14px;background:var(--accent-soft);border-radius:8px;
  font-size:14px;line-height:1.75}
.combo pre{margin:10px 0 0;white-space:pre-wrap;font:12.8px/1.7 inherit;color:var(--ink2)}

/* ---------- 抽屉 ---------- */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:50;opacity:0;pointer-events:none;
  transition:.18s}
.mask.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--bg);
  z-index:60;transform:translateX(102%);transition:transform .22s ease;display:flex;flex-direction:column}
.drawer.show{transform:none}
.drawer header{position:static;background:var(--bg);display:flex;align-items:center;
  justify-content:space-between;padding:14px 18px;gap:10px}
.drawer .dbody{flex:1;overflow-y:auto;padding:0 18px 30px}
.tabs{display:flex;gap:6px;padding:0 18px 12px}
.tab{padding:6px 12px;border-radius:999px;font-size:13px;color:var(--ink2);cursor:pointer;
  border:1px solid transparent}
.tab.on{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:550}
.mini{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  margin-bottom:9px}
.mini .mt{font-size:13.5px;font-weight:550;margin-bottom:2px;word-break:break-word}
.mini .mb{font-size:12.8px;color:var(--ink2);word-break:break-word}
.mini .ma{margin-top:8px;display:flex;gap:12px;font-size:12px;color:var(--ink3)}
.mini .ma span{cursor:pointer}
.mini .ma span:hover{color:var(--accent)}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.3)}
.modal.show{display:flex}
.modal .box{background:var(--panel);border-radius:12px;box-shadow:var(--shadow);
  width:min(560px,100%);max-height:88vh;overflow-y:auto;padding:20px 22px}
.modal h3{margin:0 0 14px;font-size:16px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:4px}
.field input,.field textarea,.field select{width:100%;padding:8px 11px;border:1px solid var(--line);
  border-radius:8px;font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--panel);outline:none}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#c9c5bd}
.modal .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

/* ---------- 提示 ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#2b2b2b;
  color:#fff;font-size:13px;padding:9px 16px;border-radius:8px;opacity:0;pointer-events:none;
  transition:.2s;z-index:99;max-width:80vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
kbd{font:inherit;font-size:11.5px;background:var(--tag);border-radius:4px;padding:1px 5px;color:var(--ink2)}

/* ---------- 响应式 ---------- */
.aside-head{display:none}
@media(max-width:900px){
  .bar{padding:12px 14px;gap:10px}
  .hint{display:none}
  .brand .b-long{display:none}
  .brand .b-short{display:inline}
  .filter-btn{display:inline-flex;align-items:center;gap:5px;flex:none}
  .wrap{grid-template-columns:minmax(0,1fr);padding:14px;gap:0}
  aside{display:none;position:fixed;inset:0;z-index:55;background:var(--bg);
    padding:16px 16px 48px;overflow-y:auto}
  aside.open{display:block}
  .aside-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .card{padding:12px 13px}
  .card .title{font-size:14px}
  .combo{padding:14px 15px}
  .act{opacity:1}
}