body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', Arial, sans-serif;
    background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
    /*min-height: 100vh;*/
}

.container {
    max-width: 1000px;
    margin: 3rem auto 0 auto;
}

textarea {
    resize: vertical;
}

.btn {
    margin-right: 10px;
}

h1 {
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: 0 2px 16px 0 #6366f133;
    color: #2c3e50;
    margin-bottom: 30px;
}

.form-label {
    font-weight: 500;
}

#outputText {
    background-color: #f8f9fa;
}

.card {
    border-radius: 1.5rem !important;
    box-shadow: 0 4px 32px 0 #6366f122;
    border: none;
}

.card-body {
    padding: 2rem;
}

textarea.form-control {
    border-radius: 0.75rem;
    min-height: 120px;
    font-size: 1rem;
    background: #f4f6fb;
    transition: box-shadow 0.2s;
}

textarea.form-control:focus {
    box-shadow: 0 0 0 2px #6366f1;
    background: #fff;
}

label.form-label {
    font-weight: 500;
    color: #6366f1;
    margin-bottom: 0.25rem;
}

.btn {
    border-radius: 0.75rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: background 0.2s, color 0.2s;
}

.btn-outline-secondary {
    border-color: #6366f1;
    color: #6366f1;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: #6366f1;
    color: #fff;
}

.btn-secondary {
    background: #6366f1;
    border: none;
}

.btn-secondary:hover, .btn-secondary:focus {
    background: #4f46e5;
}

.bg-light {
    background: #f4f6fb !important;
}

@media (max-width: 767px) {
    .card-body {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
        padding: 1rem 0;
    }
    textarea.form-control {
        min-height: 80px;
    }
}