Mike0021/MiniCPM5-Pi-Web-Agent

1:root {2  color: #172033;3  background: #f3f6f9;4  font-family:5    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;6}7 8* {9  box-sizing: border-box;10}11 12body {13  margin: 0;14  min-width: 320px;15}16 17button,18input,19select,20textarea {21  font: inherit;22}23 24#app {25  min-height: 100vh;26  padding: 18px;27}28 29.shell {30  width: min(1280px, 100%);31  margin: 0 auto;32}33 34.topbar {35  display: flex;36  align-items: end;37  justify-content: space-between;38  gap: 16px;39  padding: 8px 0 18px;40  border-bottom: 1px solid #c7d2df;41}42 43h1,44h2,45p {46  margin: 0;47}48 49h1 {50  font-size: 38px;51  line-height: 1;52  letter-spacing: 0;53}54 55h2 {56  font-size: 15px;57  line-height: 1.2;58  color: #405064;59}60 61#model-label {62  margin-top: 8px;63  color: #5d6c7f;64  overflow-wrap: anywhere;65}66 67.status-stack {68  display: flex;69  flex-wrap: wrap;70  justify-content: end;71  gap: 8px;72  max-width: 620px;73}74 75.status {76  min-height: 34px;77  max-width: 260px;78  padding: 7px 10px;79  border: 1px solid #b7c4d3;80  border-radius: 6px;81  background: #ffffff;82  color: #314155;83  overflow-wrap: anywhere;84}85 86.controls {87  display: grid;88  grid-template-columns: 1.2fr 1fr 1fr 1fr;89  gap: 12px;90  margin: 18px 0 12px;91}92 93label {94  display: grid;95  gap: 6px;96  color: #526173;97  font-size: 14px;98  font-weight: 650;99}100 101select,102input,103textarea {104  width: 100%;105  border: 1px solid #b8c5d4;106  border-radius: 6px;107  background: #ffffff;108  color: #152033;109}110 111select,112input {113  height: 42px;114  padding: 0 10px;115}116 117.command-row {118  display: flex;119  flex-wrap: wrap;120  gap: 10px;121  margin-bottom: 14px;122}123 124button {125  min-width: 116px;126  height: 42px;127  padding: 0 16px;128  border: 0;129  border-radius: 6px;130  background: #176b6c;131  color: #ffffff;132  font-weight: 750;133  cursor: pointer;134}135 136button:nth-child(2) {137  background: #4f5f73;138}139 140button:nth-child(3) {141  background: #7a4d18;142}143 144button:disabled {145  cursor: wait;146  opacity: 0.64;147}148 149.workspace {150  display: grid;151  gap: 14px;152}153 154.prompt-pane {155  display: grid;156  gap: 10px;157}158 159textarea {160  min-height: 116px;161  resize: vertical;162  padding: 13px;163  line-height: 1.45;164}165 166#run {167  width: fit-content;168}169 170.panes {171  display: grid;172  grid-template-columns: 1.35fr 0.9fr;173  gap: 12px;174}175 176.pane {177  display: grid;178  gap: 8px;179  min-width: 0;180}181 182.pane.wide {183  grid-column: 1 / -1;184}185 186pre {187  min-height: 220px;188  max-height: 360px;189  margin: 0;190  padding: 14px;191  border: 1px solid #b8c5d4;192  border-radius: 6px;193  background: #fbfcfd;194  color: #162033;195  line-height: 1.45;196  white-space: pre-wrap;197  overflow: auto;198  overflow-wrap: anywhere;199}200 201#event-log {202  min-height: 150px;203  max-height: 220px;204}205 206@media (max-width: 780px) {207  #app {208    padding: 12px;209  }210 211  .topbar {212    align-items: stretch;213    flex-direction: column;214  }215 216  .status-stack {217    justify-content: start;218  }219 220  .controls,221  .panes {222    grid-template-columns: 1fr;223  }224}225 226