:root{
  --bg:#0d1117; --bg2:#10141c; --card:#161b26; --card2:#1c2230;
  --line:#232a38; --line2:#2d3648;
  --tx:#e6edf3; --tx2:#9aa5b1; --tx3:#6b7684;
  --rd:#c2412f; --rd2:#e05a44; --bl:#4a9eff; --gn:#3fb950; --gd:#d4a24c; --pp:#8b7ff0;
  --r:12px; --r2:8px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
img{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:16px}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:var(--bg2); border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{
  width:32px;height:32px;border-radius:var(--r2);background:var(--rd);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;letter-spacing:.5px;flex:none;
}
.tt{font-size:15px;font-weight:600;line-height:1.2}
.ts{font-size:11px;color:var(--tx3);line-height:1.2}
.userbox{display:flex;align-items:center;gap:8px;font-size:12px;flex:none}
.userbox .uname{color:var(--tx2)}
.userbox .badge{background:var(--card2);border:1px solid var(--line2);border-radius:20px;padding:2px 9px;color:var(--gd)}

/* ---------- 布局 ---------- */
#view{padding:14px;max-width:1180px;margin:0 auto}
.sec-title{font-size:13px;color:var(--tx2);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.sec-title b{color:var(--tx);font-weight:600;font-size:14px}
.hint{font-size:12px;color:var(--tx3);margin:6px 0 0}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.card.tight{padding:10px 12px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:var(--r2);border:1px solid var(--line2);
  background:var(--card2);color:var(--tx);font-size:13px;font-weight:500;
  transition:transform .08s,background .15s,border-color .15s;
}
.btn:active{transform:scale(.97)}
.btn:hover{border-color:var(--tx3)}
.btn.pri{background:var(--rd);border-color:var(--rd);color:#fff}
.btn.pri:hover{background:var(--rd2);border-color:var(--rd2)}
.btn.ok{background:var(--gn);border-color:var(--gn);color:#08120a}
.btn.gh{background:transparent}
.btn.sm{padding:5px 11px;font-size:12px}
.btn.full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 表单 ---------- */
.field{margin-bottom:10px}
.field label{display:block;font-size:12px;color:var(--tx2);margin-bottom:5px}
.inp{
  width:100%;padding:10px 12px;border-radius:var(--r2);
  background:var(--bg);border:1px solid var(--line2);color:var(--tx);outline:none;
}
.inp:focus{border-color:var(--bl)}
select.inp{appearance:none;background-image:none}

/* ---------- 选手卡片 ---------- */
.plist{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pcard{
  display:flex;gap:10px;align-items:center;padding:10px;border-radius:var(--r2);
  background:var(--card2);border:1px solid var(--line);
  transition:border-color .15s,transform .08s;text-align:left;width:100%;
}
.pcard:hover{border-color:var(--line2)}
.pcard:active{transform:scale(.99)}
.pcard.sel{border-color:var(--bl);background:#16233a}
.pcard .av{
  width:38px;height:38px;border-radius:var(--r2);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;color:#fff;background:var(--card);
}
.pcard .av.m{background:#7a2f24}   /* 导师 */
.pcard .av.s{background:#2a3f5f}   /* 学员 */
.pcard .info{min-width:0;flex:1}
.pcard .nm{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .sb{font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .ov{font-size:15px;font-weight:600;color:var(--gd);flex:none}

/* ---------- 属性条 ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px 10px;margin-top:8px}
.st{display:flex;align-items:center;gap:6px;font-size:11px}
.st .k{color:var(--tx3);width:26px;flex:none}
.st .bar{flex:1;height:4px;background:var(--bg);border-radius:2px;overflow:hidden}
.st .bar i{display:block;height:100%;background:var(--bl);border-radius:2px;transition:width .5s}
.st .v{color:var(--tx2);width:20px;text-align:right;flex:none}

/* ---------- 阵容 ---------- */
.lineup{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.slot{
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r2);
  padding:10px;display:flex;gap:9px;align-items:flex-start;
}
.slot .pos{
  font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg);color:var(--tx2);flex:none;
}
.slot .heroimg{width:44px;height:25px;border-radius:3px;object-fit:cover;background:var(--bg);flex:none}
.slot .nm{font-size:13px;font-weight:500}
.slot .hn{font-size:11px;color:var(--gd)}
.slot .emp{font-size:11px;color:var(--tx3)}

/* ---------- 对局 ---------- */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.vs .mid{font-size:12px;color:var(--tx3);text-align:center}
.scorebar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.sc{background:var(--card2);border:1px solid var(--line);border-radius:var(--r2);padding:8px 10px;text-align:center}
.sc .k{font-size:11px;color:var(--tx3)}
.sc .v{font-size:19px;font-weight:600;line-height:1.3}
.sc .v.up{color:var(--gn)} .sc .v.dn{color:var(--rd)}

.situ{
  background:var(--card2);border-left:3px solid var(--bl);
  border-radius:0 var(--r2) var(--r2) 0;padding:10px 12px;font-size:13px;margin-bottom:12px;
}

.opts{display:grid;gap:8px}
.opt{
  text-align:left;padding:11px 13px;border-radius:var(--r2);
  background:var(--card2);border:1px solid var(--line);
  transition:border-color .15s,transform .08s;
}
.opt:hover{border-color:var(--tx3)}
.opt:active{transform:scale(.995)}
.opt.sel{border-color:var(--bl);background:#16233a}
.opt .t{font-size:14px;font-weight:500;display:flex;justify-content:space-between;gap:8px;align-items:center}
.opt .t .rk{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--bg);color:var(--tx3)}
.opt .d{font-size:12px;color:var(--tx3);margin-top:2px}
.exec{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.exec button{
  font-size:11px;padding:4px 9px;border-radius:14px;
  border:1px solid var(--line2);background:var(--bg);color:var(--tx2);
}
.exec button.on{background:var(--bl);border-color:var(--bl);color:#04121f;font-weight:500}

/* ---------- 日志 ---------- */
.logbox{
  background:#07090d;border:1px solid var(--line);border-radius:var(--r2);
  padding:10px 12px;height:170px;overflow-y:auto;
}
.logbox .hd{font-size:11px;color:var(--tx3);margin-bottom:6px;display:flex;justify-content:space-between}
.logbox .ln{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.75;
  color:#b6c2cf;padding:2px 0;border-bottom:1px dashed #151a22;
  opacity:0;animation:fin .35s forwards;
}
.logbox .ln.ok{color:#7ee787}
.logbox .ln.bad{color:#ff9b92}
.logbox .ln.sys{color:var(--gd)}
@keyframes fin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- 动画 ---------- */
@keyframes pop{0%{opacity:0;transform:scale(.94)}60%{transform:scale(1.01)}100%{opacity:1;transform:none}}
.pop{animation:pop .32s ease-out}
@keyframes slide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.slide{animation:slide .28s ease-out}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.shake{animation:shake .3s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.pulse{animation:pulse 1.1s infinite}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 弹出层 ---------- */
.modal-wrap{
  position:absolute;inset:0;z-index:100;background:rgba(4,6,10,.78);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-box{
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
  padding:16px;max-width:460px;width:100%;max-height:82vh;overflow-y:auto;
}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:#22293a;border:1px solid var(--line2);color:var(--tx);
  padding:9px 16px;border-radius:20px;font-size:13px;z-index:200;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ---------- 空状态 / 冠军 ---------- */
.big{text-align:center;padding:26px 12px}
.big .em{font-size:44px;line-height:1}
.big h3{margin:10px 0 6px;font-size:19px;font-weight:600}
.trophy{color:var(--gd)}

/* ---------- 移动端 ---------- */
@media (max-width:768px){
  #view{padding:10px}
  .plist{grid-template-columns:1fr}
  .lineup{grid-template-columns:1fr}
  .vs{grid-template-columns:1fr;gap:6px}
  .vs .mid{order:2}
  .stats{grid-template-columns:repeat(2,1fr)}
  .logbox{height:150px}
  .tt{font-size:14px}
}
@media (min-width:769px){
  .cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
}