style.css

body, html { 
    margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #ff00cc 0%, #333399 100%);
    background-attachment: fixed; color: white; 
}
.container { display: flex; flex-direction: column; height: 100vh; padding: 20px; box-sizing: border-box; }
header { text-align: center; margin-bottom: 10px; }
.toolbar { 
    display: flex; gap: 10px; margin-bottom: 10px; padding: 15px; border-radius: 15px;
    background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); 
}
.toolbar button, .toolbar select { 
    padding: 8px 15px; border-radius: 8px; border: none;
    background: rgba(255, 255, 255, 0.3); color: white; cursor: pointer; font-weight: bold; 
}
select { 
    background: #4a148c !important; 
    color: white !important; 
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
select option { background: #311b92; color: white; }
main { display: flex; flex: 1; overflow: hidden; }
#editor { 
    flex: 1; width: 100%; height: 100%; padding: 20px; border-radius: 15px;
    background: #1e1e1e !important; 
    color: #d4d4d4; 
    border: 2px solid rgba(255, 255, 255, 0.2); 
    font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; resize: none; outline: none; 
}