body {
    padding: 20px;
}
iframe {
    border: 1px solid #ccc;
    border-radius: 5px;
}
:root {
--primary-color: #4b2e83;
--secondary-color: #c7c1d7;
--accent-color: #0d6a37;
--text-color: #333;
--link-color: #0056b3;
--white: #ffffff;
}


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #f9f9f9;
margin: 0;
padding: 20px;
}


.cms-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: var(--white);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}


h1 {
text-align: center;
color: var(--primary-color);
margin-bottom: 20px;
}


.form-group {
margin-bottom: 15px;
}


label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}


input, textarea, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: inherit;
font-size: 1rem;
}


button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
margin-right: 10px;
}


button:hover {
background-color: #3b2366;
}


.button-group {
margin-top: 20px;
display: flex;
justify-content: space-between;
}


.preview-container {
margin-top: 30px;
border-top: 2px solid var(--secondary-color);
padding-top: 20px;
}


.article-inputs {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 15px;
border-radius: 4px;
background-color: #f9f9f9;
}


.article-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}


.remove-article {
background-color: #dc3545;
padding: 5px 10px;
font-size: 0.8rem;
}


.remove-article:hover {
background-color: #bd2130;
}


#articles-container {
margin-top: 20px;
}


.tabs {
display: flex;
margin-bottom: 20px;
}


.tab {
padding: 10px 20px;
background-color: var(--secondary-color);
cursor: pointer;
margin-right: 5px;
border-radius: 4px 4px 0 0;
}


.tab.active {
background-color: var(--primary-color);
color: white;
}


.cms-container .tab-content {
display: none;
}


.cms-container .tab-content.active {
display: block;
}


#html-output {
width: 100%;
height: 300px;
font-family: monospace;
font-size: 0.9rem;
padding: 10px;
background-color: #f5f5f5;
border: 1px solid #ddd;
white-space: pre-wrap;
overflow-x: auto;
}


.image-placeholder {
width: 100%;
height: 150px;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
border: 1px dashed #ccc;
}


.checkbox-group {
display: flex;
align-items: center;
}


.checkbox-group input {
width: auto;
margin-right: 10px;
}