body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #111827;
    /* bg-gray-900 */
}

.card {
    background-color: #1F2937;
    /* bg-gray-800 */
    border: 1px solid #374151;
    /* border-gray-700 */
}

.input-field {
    background-color: #374151;
    /* bg-gray-700 */
    border: 1px solid #4B5563;
    /* border-gray-600 */
    color: #D1D5DB;
    /* text-gray-300 */
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    width: 100%;
}

.input-field:focus {
    outline: none;
    border-color: #60A5FA;
    /* border-blue-400 */
    box-shadow: 0 0 0 2px #3B82F6;
    /* ring-blue-500 */
}

.input-field:disabled {
    background-color: #4B5563;
    /* bg-gray-600 */
    cursor: not-allowed;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-primary {
    background-color: #2563EB;
    /* bg-blue-600 */
    color: white;
}

.btn-primary:hover {
    background-color: #1D4ED8;
    /* bg-blue-700 */
}

.btn-secondary {
    background-color: #4B5563;
    /* bg-gray-600 */
    color: white;
}

.btn-secondary:hover {
    background-color: #6B7280;
    /* bg-gray-500 */
}

[x-cloak] {
    display: none !important;
}