:root{
  --bg:#0b0f14;
  --card:#111826cc;
  --text:#e7eefc;
  --muted:#98a6bd;
  --line:#23304a;

  --ok:#7ee6a3;
  --warn:#ffd27a;
  --bad:#ff8f8f;
  --sleep:#b9a7ff;

  --farm: rgba(57,217,138,.55);
  --fight: rgba(255,210,122,.65);
  --pause: rgba(152,166,189,.55);
  --sleepSeg: rgba(185,167,255,.65);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Arial;
  background: radial-gradient(1200px 800px at 30% 10%, #121f34 0%, var(--bg) 55%);
  color:var(--text);
  min-height:100vh;
  display:flex;
  justify-content:center;
}
.wrap{ max-width:980px; width:100%; margin:0 auto; padding:18px; }
.top{ display:flex; gap:12px; flex-wrap:wrap; align-items:baseline; justify-content:space-between; }
h1{ margin:0; font-size:20px; letter-spacing:.2px; }

.pill{
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
}

.grid{ display:grid; grid-template-columns: 1.08fr .92fr; gap:12px; margin-top:14px; align-items:stretch; }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }

.card{
  background: rgba(17,24,38,.72);
  border:1px solid rgba(35,48,74,.8);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
.grid > .card:last-child{ display:flex; flex-direction:column; }
.grid > .card:last-child .list{
  flex:1 1 auto;
  max-height: min(420px, calc(100vh - 360px));
  min-height: 140px;
  overflow:auto;
}
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.between{ justify-content:space-between; }
.muted{ color:var(--muted); font-size:12px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; }

.mode{
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(35,48,74,.9);
  background: rgba(12,18,32,.55);
}
.mode.ok{ color:var(--ok); }
.mode.warn{ color:var(--warn); }
.mode.bad{ color:var(--bad); }

.kvs{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top:10px; }
@media (max-width: 520px){ .kvs{ grid-template-columns:1fr; } }

.kv{
  border:1px solid rgba(35,48,74,.7);
  border-radius:14px;
  padding:10px;
  background: rgba(12,18,32,.55);
}
.kv .k{ color:var(--muted); font-size:12px; }
.kv .v{ font-size:18px; margin-top:4px; font-weight:900; }

.bars{ margin-top:10px; }
.bar{
  height:14px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.fill{ height:100%; width:0%; }
.fill.mp{ background: linear-gradient(90deg, #5aa7ff, #4d7dff); }

.btns{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin-top:12px; }
button{
  border:1px solid rgba(35,48,74,.9);
  background:#0f1726;
  color:var(--text);
  padding:12px 10px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  transition: transform .05s ease, border-color .15s ease, background .15s ease;
  user-select:none;
}
button:active{ transform: scale(.99); }
button:hover{ border-color:#3a5390; }

.b-farm{ background: linear-gradient(180deg, rgba(24,78,49,.35), rgba(15,23,38,.95)); }
.b-fight{ background: linear-gradient(180deg, rgba(86,64,20,.35), rgba(15,23,38,.95)); }
.b-pause{ background: linear-gradient(180deg, rgba(65,76,97,.35), rgba(15,23,38,.95)); }
.b-gank{ background: linear-gradient(180deg, rgba(86,24,24,.35), rgba(15,23,38,.95)); }
.b-restore{ background: linear-gradient(180deg, rgba(37,72,120,.35), rgba(15,23,38,.95)); }
.b-sleep{ background: linear-gradient(180deg, rgba(86,66,140,.35), rgba(15,23,38,.95)); }

.timelineBox{ margin-top:10px; }
.timeline{
  margin-top:10px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;
}
.seg{ height:100%; }
.seg.farm{ background: var(--farm); }
.seg.fight{ background: var(--fight); }
.seg.pause{ background: var(--pause); }
.seg.sleep{ background: var(--sleepSeg); }

.list{ margin:10px 0 0; padding:0; list-style:none; max-height:420px; overflow:auto; }
.list li{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(35,48,74,.55);
}
.tag{ font-weight:900; }
.tag.ok{ color:var(--ok); }
.tag.warn{ color:var(--warn); }
.tag.bad{ color:var(--bad); }
.tag.sleep{ color:var(--sleep); }
.reason{ color:var(--muted); font-size:12px; margin-top:3px; }

.foot{ display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; margin-top:10px; }
.linkbtn{
  border:1px dashed rgba(152,166,189,.55);
  background:transparent;
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
}
.danger{ color:var(--bad); }
.tip{ margin-top:8px; }

.fx{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.spark{
  position:absolute; width:6px; height:6px; border-radius:50%;
  animation: pop 1.2s ease-out forwards;
}
@keyframes pop{
  0%{ transform: scale(1); opacity:1; }
  100%{ transform: scale(12); opacity:0; }
}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background: rgba(12,18,32,.85);
  border:1px solid rgba(35,48,74,.8);
  color: var(--text);
  padding:10px 12px;
  border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display:none;
  max-width:min(620px, calc(100vw - 24px));
}

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; display:none; z-index:50; }
.modal[aria-hidden="false"]{ display:block; }
.modalMask{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.modalCard{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 24px));
  border-radius:18px;
  border:1px solid rgba(35,48,74,.9);
  background: rgba(12,18,32,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding:14px;
}
.modalHead{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.modalTitle{ font-weight:950; font-size:18px; }
.modalSub{ margin-top:2px; }
.modalClose{
  border:1px solid rgba(35,48,74,.9);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
}
.modalClose:hover{
  border-color:#3a5390;
  background: rgba(255,255,255,.1);
}
.modalGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  margin-top:12px;
}
@media (max-width: 520px){ .modalGrid{ grid-template-columns: 1fr; } }
.modalKv{
  border:1px solid rgba(35,48,74,.7);
  border-radius:14px;
  padding:10px;
  background: rgba(0,0,0,.12);
}
.modalKv .v{ font-size:20px; font-weight:950; margin-top:4px; }
.modalActions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.modalBtn{
  width: 100%;
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(35,48,74,.9);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-weight:950;
  cursor:pointer;
}
.modalBtn:hover{
  border-color:#3a5390;
  background: rgba(255,255,255,.12);
}
.gankActions{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  margin-top:12px;
}
.modalStory{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(35,48,74,.7);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:900;
  line-height: 1.5;
}
.modalStory .mutedline{
  display:block;
  margin-top:4px;
  color: var(--muted);
  font-weight:700;
  font-size:12px;
}
.modalHistory{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(35,48,74,.7);
  background: rgba(0,0,0,.12);
}
.modalHistoryTitle{ font-size:12px; }
.historyList{
  list-style:none;
  padding:0;
  margin:8px 0 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:160px;
  overflow:auto;
}
.historyItem{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  color: var(--text);
}
.historyItem .muted{ font-size:12px; }
.modalField{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.modalLabel{ font-size:12px; }
.modalInput{
  border:1px solid rgba(35,48,74,.7);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
}
.modalInput::placeholder{ color: var(--muted); font-weight:700; }