.content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    font-size: 16px; /* Base font size */
}

.content h1 {
    color: #cba6f7;
    margin-bottom: 1.25em;
    font-size: 1.75em; /* 28px relative to 16px base */
    font-weight: 500;
}

.content h2 {
    color: #f9e2af;
    margin-bottom: 1.25em;
    font-size: 1.5em; /* 24px relative to 16px base */
    font-weight: 500;
}

.content h3 {
    color: #a6e3a1;
    margin: 1.56em 0 0.94em 0;
    font-size: 1.25em; /* 20px relative to 16px base */
    font-weight: 500;
}

.content h4 {
    color: #89b4fa;
    margin: 1.25em 0 0.63em 0;
    font-size: 1.125em; /* 18px relative to 16px base */
    font-weight: 500;
}

.content h5 {
    color: #f5c2e7;
    margin: 0.94em 0 0.63em 0;
    font-size: 1em; /* 16px - same as base */
    font-weight: 500;
}

.content h6 {
    color: #fab387;
    margin: 0.94em 0 0.63em 0;
    font-size: 0.875em; /* 14px relative to 16px base */
    font-weight: 500;
}

.content p {
    line-height: 1.6;
    margin-bottom: 0.94em; /* 15px relative to 16px base */
    color: #cdd6f4;
}

/* Lists */
.content ul {
    margin: 0.94em 0; /* 15px relative to 16px base */
    padding-left: 0;
    list-style: none;
}

.content ul li {
    position: relative;
    padding-left: 1.56em; /* 25px relative to 16px base */
    margin-bottom: 0.5em; /* 8px relative to 16px base */
    color: #cdd6f4;
    line-height: 1.6;
}

.content ul li::before {
    content: '•';
    position: absolute;
    left: 0.5em; /* 8px relative to 16px base */
    font-size: 1em; /* Same as base font size for consistency */
    font-weight: bold;
}

.content ul li:nth-child(8n+1)::before { color: #f9e2af; }
.content ul li:nth-child(8n+2)::before { color: #a6e3a1; }
.content ul li:nth-child(8n+3)::before { color: #89b4fa; }
.content ul li:nth-child(8n+4)::before { color: #f5c2e7; }
.content ul li:nth-child(8n+5)::before { color: #fab387; }
.content ul li:nth-child(8n+6)::before { color: #94e2d5; }
.content ul li:nth-child(8n+7)::before { color: #f38ba8; }
.content ul li:nth-child(8n+8)::before { color: #cba6f7; }

.content ol {
    margin: 0.94em 0; /* 15px relative to 16px base */
    padding-left: 0;
    list-style: none;
    counter-reset: ordered-counter;
}

.content ol li {
    position: relative;
    padding-left: 2.19em; /* 35px relative to 16px base */
    margin-bottom: 0.5em; /* 8px relative to 16px base */
    color: #cdd6f4;
    line-height: 1.6;
    counter-increment: ordered-counter;
}

.content ol li::before {
    content: counter(ordered-counter) '.';
    position: absolute;
    left: 0.5em; /* 8px relative to 16px base */
    font-size: 0.875em; /* 14px relative to 16px base */
    font-weight: bold;
}

.content ol li:nth-child(8n+1)::before { color: #f9e2af; }
.content ol li:nth-child(8n+2)::before { color: #a6e3a1; }
.content ol li:nth-child(8n+3)::before { color: #89b4fa; }
.content ol li:nth-child(8n+4)::before { color: #f5c2e7; }
.content ol li:nth-child(8n+5)::before { color: #fab387; }
.content ol li:nth-child(8n+6)::before { color: #94e2d5; }
.content ol li:nth-child(8n+7)::before { color: #f38ba8; }
.content ol li:nth-child(8n+8)::before { color: #cba6f7; }

.content ul ul,
.content ol ol,
.content ul ol,
.content ol ul {
    margin: 0.31em 0; /* 5px relative to 16px base */
    padding-left: 1.25em; /* 20px relative to 16px base */
}

.content ul ul li,
.content ol ol li,
.content ul ol li,
.content ol ul li {
    margin-bottom: 0.31em; /* 5px relative to 16px base */
}

/* Form elements styling */
.content input,
.content textarea,
.content select {
    width: 100%;
    padding: 0.75em 1em; /* 12px 16px relative to 16px base */
    margin-bottom: 1em; /* 16px relative to 16px base */
    background-color: #313244; /* Catppuccin Mocha Surface0 */
    color: #cdd6f4; /* Catppuccin Mocha Text */
    border: 2px solid #45475a; /* Catppuccin Mocha Surface1 */
    border-radius: 0.5em; /* 8px relative to 16px base */
    font-family: inherit;
    font-size: 1em; /* Same as base font size */
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.content input:focus,
.content textarea:focus,
.content select:focus {
    outline: none;
    border-color: #89b4fa; /* Catppuccin Mocha Blue */
    box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.2); /* Blue glow with transparency */
}

.content input:hover,
.content textarea:hover,
.content select:hover {
    border-color: #585b70; /* Catppuccin Mocha Surface2 - slightly lighter on hover */
}

/* Input validation states */
.content input:invalid,
.content textarea:invalid,
.content select:invalid {
    border-color: #f38ba8; /* Catppuccin Mocha Red */
}

.content input:invalid:focus,
.content textarea:invalid:focus,
.content select:invalid:focus {
    border-color: #f38ba8; /* Catppuccin Mocha Red */
    box-shadow: 0 0 0 3px rgba(243, 139, 168, 0.2); /* Red glow */
}

/* Placeholder styling */
.content input::placeholder,
.content textarea::placeholder {
    color: #9399b2; /* Catppuccin Mocha Overlay1 */
    opacity: 1;
}

/* Labels */
.content label {
    display: block;
    margin-bottom: 0.5em; /* 8px relative to 16px base */
    color: #f9e2af; /* Catppuccin Mocha Yellow */
    font-weight: 500;
    font-size: 0.875em; /* 14px relative to 16px base */
}

/* Form groups */
.content .form-group {
    margin-bottom: 1.5em; /* 24px relative to 16px base */
}

/* Buttons */
.content button,
.content input[type="submit"],
.content input[type="button"] {
    padding: 0.75em 1.5em; /* 12px 24px relative to 16px base */
    background-color: #89b4fa; /* Catppuccin Mocha Blue */
    color: #1e1e2e; /* Catppuccin Mocha Base for contrast */
    border: none;
    border-radius: 0.5em; /* 8px relative to 16px base */
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.content button:hover,
.content input[type="submit"]:hover,
.content input[type="button"]:hover {
    background-color: #74c7ec; /* Catppuccin Mocha Sapphire - lighter blue */
    transform: translateY(-1px);
}

.content button:active,
.content input[type="submit"]:active,
.content input[type="button"]:active {
    transform: translateY(0);
}

.content button:focus,
.content input[type="submit"]:focus,
.content input[type="button"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.3);
}

.content input:disabled,
.content textarea:disabled,
.content select:disabled,
.content button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #45475a; /* Catppuccin Mocha Surface1 */
    border-color: #585b70; /* Catppuccin Mocha Surface2 */
}

.content select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 1em;
    padding-right: 2.5em;
    appearance: none;
}

.content textarea {
    min-height: 6em; /* 96px relative to 16px base */
    resize: vertical;
}