:root {
    --error-color: #ff4d4d;
    --success-color: #2ecc71;
    --warning-color: #e67e22;
}

body { 
    font-family: sans-serif; 
    line-height: 1.6; 
    max-width: 900px; 
    margin: 0 auto; 
    padding: 20px; 
    background-color: #f4f7f6; 
}

.container { 
    background: white; 
    padding: 30px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

h1 { border-bottom: 2px solid #333; padding-bottom: 10px; }

.field-group { 
    margin-bottom: 20px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 15px; 
}

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

input[type="text"], textarea { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    box-sizing: border-box; 
    font-size: 16px; 
}

textarea { height: 120px; }
#main-content { height: 500px; }

.counter { font-size: 0.85em; margin-top: 5px; color: #666; }
.alert { color: var(--error-color); font-weight: bold; }

.btn-group { 
    margin: 20px 0; 
    display: flex; 
    gap: 10px; 
    position: sticky; 
    top: 0; 
    background: white; 
    padding: 15px 0; 
    z-index: 100; 
    border-bottom: 2px solid #eee; 
}

button { 
    padding: 10px 20px; 
    cursor: pointer; 
    border: none; 
    border-radius: 4px; 
    background: #3498db; 
    color: white; 
    font-weight: bold; 
    transition: background 0.3s;
}

button:hover { background: #2980b9; }

.btn-output { background: #e67e22; }
.btn-output:hover { background: #d35400; }

.tag-alert { 
    background: #ffeaea; 
    border: 1px solid var(--error-color); 
    padding: 10px; 
    margin-top: 10px; 
    border-radius: 4px; 
    display: none; 
    color: var(--error-color);
    font-weight: bold;
}

.tag-alert.warning {
    background: #fff3e0;
    border-color: var(--warning-color);
    color: #d35400;
}