body {
    padding: 20px;
    background-color: #f8f9fa;
    /* Use a consistent, mobile-friendly system font stack */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Source Han Sans JP", "Noto Sans JP", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1000px;
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
}

.result-section {
    background-color: #f8f9fa;
    border-radius: 5px;
    padding: 15px;
    margin-top: 20px;
}

pre {
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-size: 14px;
}

.nav-tabs {
    margin-bottom: 20px;
}

.form-label {
    font-weight: 500;
    color: #333;
}

.btn-primary {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-primary:hover {
    background-color: #004494;
    border-color: #004494;
}

h1 {
    color: #0056b3;
    margin-bottom: 30px;
    font-weight: 600;
}

h3 {
    color: #0056b3;
    font-weight: 500;
    margin-top: 25px;
    margin-bottom: 15px;
}

.tab-content {
    padding: 20px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
}

/* Animation for form transitions */
.tab-pane.fade {
    transition: opacity 0.2s linear;
}

/* Style for response section */
.result-section {
    transition: all 0.3s ease;
}

.result-section:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Copy button style */
#copyCurl {
    transition: background-color 0.3s ease;
}

#copyCurl:hover {
    background-color: #5a6268;
}

/* Results section styling */
#resultsSection {
    animation: fadeIn 0.5s ease-in;
}

#resultsSection .card {
    transition: transform 0.2s ease;
}

#resultsSection .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#resultsSection .card-header {
    background-color: #0056b3;
    color: white;
    font-weight: 500;
}

#resultsSection .alert-success {
    border: none;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    font-weight: 500;
}

/* Notes section styling */
#resultsSection pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #495057;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

#resultsSection .card-body p {
    margin-bottom: 8px;
    font-size: 15px;
}

#resultsSection .card-body strong {
    color: #0056b3;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}