body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
body.narrow { max-width: 400px; margin: 100px auto; }

.box { background: #f4f4f9; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.box.centered { padding: 30px; text-align: center; }
.box.generated { background: #e2e3e5; }

.success-box {
    background: #d4edda; color: #155724; border: 2px solid #28a745;
    padding: 15px; border-radius: 8px; font-size: 20px; font-weight: bold;
    text-align: center; margin-bottom: 20px;
}
.error { background: #f8d7da; color: #721c24; padding: 15px; margin-bottom: 20px; border-radius: 4px; }

input[type="password"],
input[type="text"] { padding: 10px; width: 80%; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; }
textarea { padding: 10px; width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 15px; resize: vertical; }

button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
a { color: #0056b3; font-weight: bold; word-break: break-all; }
.test-link { font-size: 0.9em; color: #666; margin-top: 10px; }
.logout-btn { float: right; font-size: 12px; padding: 5px 10px; background: #dc3545; color: white; border: none; border-radius: 4px; text-decoration: none; }