/* ==========================================================================
   aisse · 界面预览面板专用组件
   ========================================================================== */

.conv {
  border: 1px solid var(--line); border-radius: 13px;
  padding: 13px 15px; background: rgba(255, 255, 255, .025);
  cursor: pointer; transition: .22s;
}
.conv:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .045); }
.conv.is-on { border-color: rgba(0, 217, 200, .4); background: rgba(0, 217, 200, .07); }
.conv__t { font-size: 13.5px; font-weight: 650; }
.conv__d { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.55; }
.conv__tags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }

.tg {
  font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .07); color: var(--text-2);
}
.tg--hi { background: rgba(255, 107, 125, .15); color: #ff8296; }
.tg--mid { background: rgba(255, 180, 84, .15); color: #ffc87a; }
.tg--lo { background: rgba(53, 211, 154, .15); color: #5fe0b0; }

.chip {
  display: inline-block; font-size: 10.5px; font-weight: 650;
  padding: 2px 8px; border-radius: 99px; margin-left: 6px;
  background: rgba(0, 217, 200, .13); color: var(--brand-cyan);
  border: 1px solid rgba(0, 217, 200, .25);
}
.chip--warn { background: rgba(255, 180, 84, .13); color: var(--warn); border-color: rgba(255, 180, 84, .28); }

.disk { display: grid; gap: 9px; }
.disk__r {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .028); border: 1px solid var(--line-soft);
}
.disk__ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.disk__n { font-size: 13px; font-weight: 600; }
.disk__m { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.disk__st {
  margin-left: auto; font-size: 10.5px; font-weight: 650;
  padding: 3px 9px; border-radius: 99px; flex-shrink: 0;
  background: rgba(255, 255, 255, .06); color: var(--text-3);
}
.disk__st:first-of-type { background: rgba(0, 217, 200, .14); color: var(--brand-cyan); }

.sop { display: grid; gap: 10px; }
.sop__s {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px; border-radius: 14px;
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .022);
}
.sop__s.is-done { opacity: .58; }
.sop__s.is-on {
  border-color: rgba(0, 217, 200, .42);
  background: linear-gradient(100deg, rgba(0, 217, 200, .1), rgba(0, 217, 200, .03));
  box-shadow: 0 0 0 3px rgba(0, 217, 200, .05);
}
.sop__n {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; font-family: var(--mono);
  background: rgba(255, 255, 255, .07); color: var(--text-2);
}
.sop__s.is-on .sop__n { background: var(--brand-grad); color: #04121b; }
.sop__s.is-done .sop__n { background: rgba(53, 211, 154, .16); color: var(--ok); }
.sop__t { font-size: 14px; font-weight: 650; }
.sop__d { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.6; }
.sop__ck {
  margin-left: auto; font-size: 11px; font-weight: 650; flex-shrink: 0;
  padding: 3px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, .06); color: var(--text-3);
}
.sop__s.is-on .sop__ck { background: var(--brand-grad); color: #04121b; }
.sop__s.is-done .sop__ck { background: rgba(53, 211, 154, .15); color: var(--ok); }

.prof { display: flex; align-items: center; gap: 13px; }
.prof__av {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: var(--brand-grad); color: #04121b;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.prof__n { font-size: 15px; font-weight: 650; }
.prof__m { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }

.bars { display: grid; gap: 10px; }
.bar { display: flex; align-items: center; gap: 11px; }
.bar__k { font-size: 12.5px; color: var(--text-2); width: 54px; flex-shrink: 0; }
.bar__t { flex: 1; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar__t i { display: block; height: 100%; border-radius: 99px; background: var(--brand-grad); }
.bar__v { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); width: 34px; text-align: right; flex-shrink: 0; }

@media (max-width: 860px) {
  .ui-split { grid-template-columns: 1fr !important; }
  .sop__s { flex-wrap: wrap; }
  .sop__ck { margin-left: 44px; }
}