@import url(
.ch-ArticleContent 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');

:root
{
  --text-color: #222;
  --text-secondary: #666;
  --background: #fff;
  --link: #0077cc;
  --link-hover: #005fa3;
  --border: #e0e0e0;
  --accent: #00b37e;
  --font-family: 'Manrope', sans-serif;
  --font-size: 16px;
  --line-height: 1.6;
}

.ch-ArticleContent
{
  margin: 0;
  padding: 24px;
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  background: var(--background);
  color: var(--text-color);
}

/* Headings */
.ch-ArticleContent h1,
.ch-ArticleContent h2,
.ch-ArticleContent h3,
.ch-ArticleContent h4,
.ch-ArticleContent h5,
.ch-ArticleContent h6
{
  font-weight: 700;
  line-height: 1.3;
  margin: 1.2em 0 0.6em;
  color: var(--text-color);
}

.ch-ArticleContent h1
{
  font-size: 2rem;
}

.ch-ArticleContent h2
{
  font-size: 1.6rem;
}

.ch-ArticleContent h3
{
  font-size: 1.3rem;
}

.ch-ArticleContent h4
{
  font-size: 1.1rem;
}

.ch-ArticleContent h5
{
  font-size: 1rem;
}

.ch-ArticleContent h6
{
  font-size: 0.9rem;
}

/* Text */
.ch-ArticleContent p
{
  margin: 0 0 1em;
}

.ch-ArticleContent strong,
.ch-ArticleContent b
{
  font-weight: 600;
}

.ch-ArticleContent em,
.ch-ArticleContent i
{
  font-style: italic;
}

.ch-ArticleContent small
{
  font-size: 0.875em;
  color: var(--text-secondary);
}

/* Links */
.ch-ArticleContent a
{
  color: var(--link);
  text-decoration: underline;
  transition: color 0.2s;
}

.ch-ArticleContent a:hover
{
  color: var(--link-hover);
  text-decoration: none;
}

/* Lists */
.ch-ArticleContent ul,
.ch-ArticleContent ol
{
  margin: 0 0 1.25em 1.5em;
}

.ch-ArticleContent li
{
  margin-bottom: 0.4em;
}

/* Tables */
.ch-ArticleContent table
{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  font-size: 0.95em;
}

.ch-ArticleContent th,
.ch-ArticleContent td
{
  padding: 0.75em 1em;
  border: 1px solid var(--border);
}

.ch-ArticleContent th
{
  background-color: #f9f9f9;
  text-align: left;
  font-weight: 600;
}

/* Code */
.ch-ArticleContent code
{
  font-family: monospace;
  font-size: 0.95em;
  background: #f4f4f4;
  padding: 2px 6px;
  border-radius: 4px;
  color: #d6336c;
}

.ch-ArticleContent pre
{
  background: #f4f4f4;
  padding: 1em;
  overflow-x: auto;
  border-radius: 6px;
  font-size: 0.9em;
}

/* Blockquote */
.ch-ArticleContent blockquote
{
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 4px solid var(--accent);
  color: var(--text-secondary);
  font-style: italic;
}

/* Images */
.ch-ArticleContent img
{
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1em 0;
}

/* Horizontal Rule */
.ch-ArticleContent hr
{
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* Forms */
.ch-ArticleContent input,
.ch-ArticleContent textarea,
.ch-ArticleContent select,
.ch-ArticleContent button
{
  font-family: var(--font-family);
  font-size: 1em;
  padding: 0.6em 0.8em;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 1em;
  box-sizing: border-box;
}

.ch-ArticleContent button
{
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.ch-ArticleContent button:hover
{
  background: #009e6f;
}

.ch-ArticleContent .ch-footer
{
  margin-top: 3em;
  padding: 2em 1em;
  border-top: 1px solid var(--border);
  font-size: 0.9em;
  color: var(--text-secondary);
  background-color: #fafafa;
}

.ch-ArticleContent .ch-footer-content
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 860px;
  margin: 0 auto;
  gap: 1em;
}

.ch-ArticleContent .ch-footer a
{
  color: var(--link);
  text-decoration: none;
}

.ch-ArticleContent .ch-footer a:hover
{
  text-decoration: underline;
}

.ch-ArticleContent .ch-footer-left,
.ch-ArticleContent .ch-footer-right
{
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

@media (max-width: 600px)
{
  .ch-ArticleContent .ch-footer-content
  {
    flex-direction: column;
    align-items: flex-start;
  }
}