:root{
  --bg:#140b1e; --bg2:#1e1230; --panel:rgba(255,255,255,.06); --panel-b:rgba(255,255,255,.12);
  --ink:#f4ecff; --ink-dim:#b7a7cf; --muted:#8a7aa6;
  --pink:#ff5c8a; --pink-soft:#ff9ec0; --red:#ff3b6b; --amber:#ffb454; --blue:#6fb7ff;
  --green:#5fd0a0; --violet:#b98cff;
  --female:#ff7eb0; --male:#69b6ff; --unknown:#c9a6ff;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(1200px 800px at 20% -10%,#2a1740 0%,transparent 60%),
             radial-gradient(1000px 700px at 100% 0%,#3a1030 0%,transparent 55%),
             var(--bg);
  color:var(--ink); min-height:100vh; line-height:1.5;
}
a{color:var(--pink-soft)}
.wrap{max-width:1280px;margin:0 auto;padding:18px 18px 60px}

header.top{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:8px}
.title{font-size:26px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(90deg,#ff9ec0,#ffd08a,#b98cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.note{font-size:12.5px;color:var(--ink-dim);background:var(--panel);border:1px solid var(--panel-b);
  padding:5px 10px;border-radius:20px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.chip{font-size:12.5px;padding:5px 11px;border-radius:20px;background:var(--panel);border:1px solid var(--panel-b);color:var(--ink-dim)}
.chip b{color:var(--ink)}

.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 18px;
  padding:12px;background:var(--panel);border:1px solid var(--panel-b);border-radius:16px}
button.btn{cursor:pointer;border:none;border-radius:12px;padding:10px 16px;font-size:14px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--pink),var(--red));box-shadow:var(--shadow);transition:.15s}
button.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
button.btn.ghost{background:transparent;border:1px solid var(--panel-b);color:var(--ink-dim);box-shadow:none}
button.btn.ghost:hover{color:var(--ink);border-color:var(--pink-soft)}
button.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.round-badge{font-size:14px;color:var(--ink-dim)}
.round-badge b{color:var(--pink-soft);font-size:18px}
.toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-dim);cursor:pointer;user-select:none}
.toggle.mini{font-size:12px}
.sel{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-dim)}
.sel select{background:rgba(0,0,0,.3);color:var(--ink);border:1px solid var(--panel-b);border-radius:9px;padding:5px 8px;font-size:13px;outline:none;cursor:pointer}
.seedbox{font-size:12px;color:var(--muted);margin-left:auto}

.main{display:grid;grid-template-columns:1.35fr .9fr;gap:16px}
@media(max-width:900px){.main{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--panel-b);border-radius:18px;padding:14px}
.card h3{margin:0 0 10px;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px}
.card h3 .sub{font-size:12px;color:var(--muted);font-weight:400;margin-left:auto}

#graphWrap{position:relative}
#graph{width:100%;height:520px;display:block;border-radius:12px;cursor:pointer;
  background:radial-gradient(600px 400px at 50% 40%,rgba(255,120,170,.06),transparent 70%)}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:12px;color:var(--ink-dim)}
.legend i{display:inline-block;width:22px;height:0;border-top-width:3px;border-top-style:solid;vertical-align:middle;margin-right:5px;border-radius:3px}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.stat{flex:1;min-width:120px;background:rgba(255,255,255,.04);border:1px solid var(--panel-b);border-radius:12px;padding:10px 12px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:20px;font-weight:800;color:var(--pink-soft)}
.stat .v small{font-size:12px;color:var(--ink-dim);font-weight:500}
.stat[data-cat]{cursor:pointer;transition:.15s}
.stat[data-cat]:hover{border-color:var(--pink-soft);transform:translateY(-1px)}
.stat.on{border-color:var(--pink);background:rgba(255,92,138,.14)}
.stat-hint{font-size:11.5px;color:var(--muted);margin-top:8px}
.fchip.cat{background:rgba(255,180,84,.18);border-color:rgba(255,180,84,.5);color:var(--amber)}

#timeline{max-height:520px;overflow:auto;display:flex;flex-direction:column;gap:8px}
#timeline::-webkit-scrollbar{width:8px}#timeline::-webkit-scrollbar-thumb{background:var(--panel-b);border-radius:8px}
.ev{display:flex;gap:9px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.035);
  border:1px solid transparent;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ev .ic{font-size:18px;line-height:1.2}
.ev .tx{font-size:13px;color:var(--ink)}
.ev .rd{font-size:11px;color:var(--muted)}
.ev.k-love{border-color:rgba(255,59,107,.4);background:rgba(255,59,107,.08)}
.ev.k-triangle{border-color:rgba(255,180,84,.45);background:rgba(255,180,84,.09)}
.ev.k-break{border-color:rgba(120,140,170,.35);background:rgba(120,140,170,.08)}
.ev.k-couple{border-color:rgba(95,208,160,.45);background:rgba(95,208,160,.10)}
.ev b.n{color:var(--pink-soft)}

.wall{margin-top:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pcard{position:relative;background:var(--panel);border:1px solid var(--panel-b);border-radius:16px;padding:12px;
  cursor:pointer;transition:.15s;overflow:hidden}
.pcard:hover{transform:translateY(-3px);border-color:var(--pink-soft);box-shadow:var(--shadow)}
.pcard .av{width:56px;height:56px;border-radius:14px;object-fit:cover;background:#2a1c3e;border:2px solid var(--panel-b)}
.pcard .rm{position:absolute;top:10px;right:10px;font-size:11px;color:var(--muted)}
.pcard .nm{font-weight:700;margin-top:8px;font-size:15px;display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.f{background:var(--female)}.dot.m{background:var(--male)}.dot.u{background:var(--unknown)}
.pcard .mb{font-size:11px;color:var(--violet);font-weight:700;letter-spacing:.5px}
.pcard .ar{font-size:12px;color:var(--ink-dim);margin-top:2px}
.pcard .status{margin-top:8px;font-size:11.5px;color:var(--pink-soft);min-height:16px}
.pcard.staff{outline:1px dashed rgba(255,180,84,.5)}
.pcard .badge{position:absolute;top:8px;left:8px;font-size:10px;background:var(--amber);color:#3a2400;padding:1px 6px;border-radius:10px;font-weight:700}

.modal-bg{position:fixed;inset:0;background:rgba(8,4,16,.7);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:50;padding:18px}
.modal-bg.show{display:flex}
.modal{max-width:460px;width:100%;background:linear-gradient(180deg,#231535,#1a0f2a);border:1px solid var(--panel-b);
  border-radius:20px;padding:20px;box-shadow:var(--shadow);animation:pop .2s ease}
.modal .head{display:flex;gap:14px;align-items:center}
.modal .head img{width:72px;height:72px;border-radius:16px;object-fit:cover;border:2px solid var(--panel-b)}
.modal .head .nm{font-size:20px;font-weight:800}
.modal .head .meta{font-size:12.5px;color:var(--ink-dim)}
.modal .bio{margin:14px 0;font-size:13.5px;color:var(--ink);background:var(--panel);padding:11px 13px;border-radius:12px}
.modal .style{font-size:12.5px;color:var(--ink-dim);margin-bottom:12px}
.modal .radar{display:block;margin:0 auto}
.modal .rel{font-size:13px;color:var(--pink-soft);margin-top:10px;min-height:18px}
.modal .x{position:absolute;top:14px;right:18px;cursor:pointer;color:var(--muted);font-size:22px}
.modal-wrap{position:relative}
.ev[data-pair]:hover{background:rgba(255,255,255,.07);border-color:var(--panel-b)}
.ev b.n{cursor:pointer}
.ev b.n:hover{text-decoration:underline}

/* 对话弹窗 */
.modal.chat{max-width:440px}
.chat-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:14px;flex-wrap:wrap}
.chat-head img{width:34px;height:34px;border-radius:10px;object-fit:cover;border:1px solid var(--panel-b)}
.chat-head .amp{color:var(--muted);font-weight:400}
.chat-head .tag{margin-left:auto;font-size:11px;color:#3a2400;background:var(--pink-soft);padding:2px 9px;border-radius:10px}
.chat-body{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:4px 2px}
.bubble{display:flex;gap:8px;align-items:flex-end;max-width:82%}
.bubble img{width:30px;height:30px;border-radius:9px;object-fit:cover;flex-shrink:0}
.bubble .txt{padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45}
.bubble.left{align-self:flex-start}
.bubble.left .txt{background:rgba(255,255,255,.09);border-bottom-left-radius:4px}
.bubble.right{align-self:flex-end;flex-direction:row-reverse}
.bubble.right .txt{background:linear-gradient(135deg,var(--pink),var(--red));color:#fff;border-bottom-right-radius:4px}
.typing{color:var(--ink-dim);text-align:center;padding:24px;font-size:14px}
.chat-foot{display:flex;align-items:center;gap:10px;margin-top:14px}

/* 内联对话（时间线里） */
.ev.k-chat .tx{padding:0}
.chatbox{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.cline{font-size:12.5px;line-height:1.5;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:4px 12px 12px 12px;padding:5px 10px;max-width:92%;align-self:flex-start}
.cline b{color:var(--pink-soft)}
.cline.r{align-self:flex-end;border-radius:12px 4px 12px 12px;background:rgba(185,140,255,.12)}
.cline.r b{color:var(--violet)}
.k-wed .ic{filter:drop-shadow(0 0 6px #ffd08a)}
.agechip{font-size:11px;color:var(--muted)}
.ptags{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.ptag{font-size:10.5px;color:var(--violet);background:rgba(185,140,255,.14);border:1px solid rgba(185,140,255,.3);border-radius:8px;padding:1px 7px;white-space:nowrap}
.mtags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.mtags .ptag{font-size:12px;padding:3px 10px}

/* 聚焦栏 */
.focusbar{display:flex;align-items:center;gap:8px;margin-left:auto}
.focusbar input{background:rgba(0,0,0,.3);color:var(--ink);border:1px solid var(--panel-b);border-radius:10px;
  padding:6px 10px;font-size:13px;outline:none;width:190px}
.focusbar input:focus{border-color:var(--pink-soft)}
.btn.tiny{padding:6px 10px;font-size:12px}
#focusChips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
#focusChips:empty{margin:0}
.fchip{font-size:12px;background:rgba(255,92,138,.18);border:1px solid rgba(255,92,138,.4);color:var(--pink-soft);
  padding:3px 9px;border-radius:12px;cursor:pointer}
.fchip:hover{background:rgba(255,92,138,.3)}

.tl-tabs{margin-left:auto;display:inline-flex;gap:4px}
.tltab{cursor:pointer;border:1px solid var(--panel-b);background:transparent;color:var(--ink-dim);
  border-radius:10px;padding:4px 11px;font-size:12.5px;font-weight:600}
.tltab.on{background:linear-gradient(135deg,var(--pink),var(--red));color:#fff;border-color:transparent}
.tltab:hover:not(.on){color:var(--ink);border-color:var(--pink-soft)}
.tl-empty{color:var(--muted);font-size:13px;text-align:center;padding:26px 10px}
.modal-btns{display:flex;gap:10px;margin-top:14px}
.modal-btns .btn{flex:1}

.foot{margin-top:26px;text-align:center;color:var(--muted);font-size:12px}