*{box-sizing:border-box}body{font:16px/1.6 system-ui,sans-serif;background:#f3f6fa;color:#173047;margin:0}main{max-width:850px;margin:2rem auto;padding:1.5rem;background:white;border-radius:12px}label{display:block;margin:1rem 0}input:not([type=checkbox]),textarea,select{display:block;width:100%;padding:.65rem;border:1px solid #64748b;border-radius:5px;font:inherit}textarea{min-height:8rem}button{background:#173047;color:white;border:0;border-radius:5px;padding:.75rem;margin:.25rem;cursor:pointer}button:disabled{opacity:.6}article{border-top:1px solid #ccc;padding:1rem 0}pre{white-space:pre-wrap;overflow-wrap:anywhere}a{color:#075985}

[hidden] {
  display: none !important;
}

#dashboard-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
  gap: 12px;
  margin: 24px 0;
}

#dashboard-summary > div {
  background: #edf3f8;
  border: 1px solid #dce5ed;
  border-radius: 10px;
  padding: 18px 10px;
  text-align: center;
}

#dashboard-summary strong {
  display: block;
  font-size: 28px;
  color: #15334b;
}

#dashboard-summary span {
  display: block;
  font-size: 13px;
  margin-top: 6px;
}

#items article {
  border: 1px solid #dce5ed;
  border-radius: 12px;
  padding: 18px;
  margin-top: 20px;
}

#items textarea {
  min-height: 200px;
}

#items pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

button:disabled {
  opacity: .6;
  cursor: wait;
}

@media (max-width: 600px) {
  #dashboard-summary {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  #items article {
    padding: 12px;
  }
}


.article-preview {
  background: #f5f7fc;
  border: 1px solid #d9e1f2;
  border-radius: 14px;
  padding: 24px;
  margin-top: 24px;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.article-preview p {
  white-space: pre-wrap;
}