body { font-family: Arial, sans-serif; background: #f0f2f5; margin: 0; padding: 0; }
.container { max-width: 700px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
h1,h2 { text-align: center; color: #333; }
textarea { width: 100%; min-height: 150px; padding: 12px; font-size: 16px; border-radius: 8px; border: 1px solid #ccc; margin-bottom: 15px; resize: vertical; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 15px; }
button { flex: 1 1 120px; padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; background: #4CAF50; color: #fff; border-radius: 6px; transition: background 0.2s ease; }
button:hover { background: #45a049; }
#output { padding: 15px; background: #e9e9e9; border-radius: 8px; min-height: 120px; white-space: pre-wrap; word-wrap: break-word; }
.logs-container { margin: 15px 0; background: #222; color: #0f0; border-radius: 8px; padding: 10px; max-height: 150px; overflow-y: auto; font-family: monospace; font-size: 14px; }
@media screen and (max-width: 480px) { .container { margin: 10px; padding: 15px; } button { flex: 1 1 100%; } }
.tagline {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-top: -8px;
    margin-bottom: 15px;
}

.notice {
    background: #fff8e1;
    border-left: 4px solid #ffb300;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
}
footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #777;
}